如何使用children()函数来选择子元素？

Question

我不太明白如何在jQuery中使用children()函数，这是我的代码：

jQuery('#nav li.over a.level-top').css({'padding-bottom': '26px'});

我希望你能用 var navLiOver = jQuery('#nav li.over'); 替换 #nav li.over。

以下代码无效:

navLiOver.children('a.level-top').css({'padding-bottom': '26px'});

能否有人向我解释一下 children() 函数如何工作？

HTML 代码：

<ul id="nav">
    <li class="level-top over">
        <a class="level-top">Link1</a>
        <ul class="level0">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
</ul>

- LaKaede

---

你的标记结构是什么？children()只会选择与选择器匹配的直接后代，而你的第一个选择器将选择li.over层次结构中任何位置的所有a.level-top元素... - BenM

正如您在这里所看到的，您的JavaScript代码运行良好：http://jsfiddle.net/JPxPm/。问题出在CSS上。 - Felix Kling

有人能向我解释一下children()函数是如何工作的吗？- 好的，jQuery文档解释得相当清楚。 - nnnnnn

Answer 1

$('#nav li.over a.level-top') 的等效写法是 navLiOver.find('a.level-top')

但是，要使你的 padding-bottom 代码生效，你需要确保锚点具有允许填充的显示模式，例如 block 或 inline-block。无论你如何查找元素，这一点都是正确的。

演示

- David Hedlund

Answer 2

你可以使用find()函数。

navLiOver.find('a.level-top');

.find() 和 .children() 方法很相似，但后者只会遍历 DOM 树中的一级子元素。

而 find()

获取当前匹配元素集合中每个元素的所有后代元素。

- bipen

---

这个也不起作用 :/ - LaKaede

你能发布你的HTML吗？ - bipen

Answer 3

之间的区别

jQuery('#nav li.over a.level-top')

并且

jQuery('#nav li.over').children('a.level-top')

这是因为后者只选择直接子元素。如果您期望的行为是，应该使用find()。

- John Kentucky

---

就像我说的，find()函数也不起作用 :/ - LaKaede

Answer 4

你的代码完美运行

navLiOver.children('a.level-top')

无法正常工作的是.css({'padding-bottom': '26px'});

Fiddle

a标签默认为inline。您无法对内联元素应用上/下填充。

如果您想在<a>周围添加一些填充，可以这样做

a { color: #fff; display: inline-block; text-decoration: none; padding: 0px 0px 26px 0px;} 

代码片段

- Adil Shaikh

---

我知道，当我写这个代码时它完美地工作了 > jQuery('#nav li.over a.level-top').css({'padding-bottom': '26px'}); - LaKaede