jQuery - 孩子们答案

【问题标题】：jQuery - ChildsjQuery - 孩子们
【发布时间】：2015-04-29 23:11:35
【问题描述】：

我想知道如何更改元素的特定子元素。在这种情况下，我想更改 ul 的第一个 a。我试过这个：

[HTML 和 JQUERY]

<body>

<ul id="nav">
    <a href="#"><li>1</li></a>
    <a href="#"><li>2</li></a>
    <a href="#"><li>3</li></a>
    <a href="#"><li>4</li></a>      
    <a href="#"><li>5</li></a>
    <a href="#"><li>6</li></a>
    <a href="#"><li>7</li></a>
    <a href="#"><li>8</li></a>
</ul>

<div id="hidden">
    <h1>Text</h1>
    <img src="#">
</div>

<script>
    var main = function() {
    var el1H1 = "Text";
    var el1P = "Some text again.";
        $('ul').child().click(function() {
            $('#hidden').slideDown(1000);       
        });
    };

    $(document).ready(main);
</script>

【问题讨论】：

无效的 HTML。 ul 只能有li 作为孩子，你需要像<li><a href="#">1</a></li> 一样改变你的HTML
@Satpal 我需要这样做才能在悬停时获得全高背景变化。
您的示例存在几个问题。也许如果你澄清总体目标，你会在这里得到更好的结果:)
我们告诉你它不能完成，它是无效的，浏览器会为你移动锚点，因为它们不能在你放置它们的位置

标签： javascript jquery html css

【解决方案1】：

试试这个

<ul id="nav">
   <li>
     <a></a>
   </li>
   <li>
     <a></a>
   </li>
   <li>
     <a></a>
   </li>
</ul>

$('#nav li:first-child').find('a').click(function() {
        $('#hidden').slideDown(1000);       
});

【讨论】：

您好，感谢您的回复。但是，如果我将
和更改为彼此的位置，那么我的
不再与导航栏的高度相同。然后我的悬停和链接效果就消失了......

@HydraCles 如果你想保留你的 html 结构，那么你可以使用这个：$('#nav a:first-child').click(function() { $('#hidden').slideDown(1000); });

@HydraCles：您不会通过使用损坏的 HTML 来解决其他样式问题来避免它们！您需要改为解决您的高度问题，或者至少不要使用 UL 作为锚点的父级。

@erkaner 啊，谢谢 :)。我可以在“___”之间使用 CSS 选择器。不知道：o。我会尽快“解决”你：3 分钟。

@TrueBlueAussie 我也可以只使用没有

。那是损坏的 HTML 吗？