Question

我无法理解如何在jQuery中使用children（）函数，我有这段代码：

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

我想将#nav li.over替换为var navLiOver = jQuery('#nav li.over');

这不起作用：

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

有人可以向我解释children()函数的工作原理吗？

HTML code：

<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>

Answer 1

相当于$('#nav li.over a.level-top')是navLiOver.find('a.level-top')

要使padding-bottom代码产生任何效果，您需要确保锚具有允许填充的显示模式，例如block或inline-block。无论您如何找到元素，都是如此。

Demo

Answer 2

你可以使用find（）

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

.find（）和.children（）方法类似，只是后者只沿DOM树向下移动一层。

而find（）

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

Answer 3

之间的区别

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

和

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

是后者只选择直接的孩子。对于您期望的行为，请改用find（）。

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;}

Fiddle

如何使用children（）函数选择子项？

4 个答案: