4

我不明白如何在 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 代码：

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

4 回答 4

3

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

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

演示

于 2013-04-10T11:05:36.567 回答
2

你可以使用 find()

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

.find() 和 .children() 方法是相似的，只是后者只沿着 DOM 树向下移动一层。

而查找（）

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

于 2013-04-10T11:06:21.680 回答
0

和...之间的不同

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

和

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

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

于 2013-04-10T11:11:51.970 回答
0

你的代码工作很好

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

不起作用的是.css({'padding-bottom': '26px'});

小提琴

a标签是inline默认的。您不能将顶部/底部填充应用于内联元素

如果你想在你周围有一些填充物，<a>你可以这样做

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

小提琴

于 2013-04-10T11:32:05.080 回答