Jquery 子选择器与 .each答案

【问题标题】：Jquery child selector vs. .eachJquery 子选择器与 .each
【发布时间】：2013-01-29 08:39:11
【问题描述】：

给定以下示例表：

<ul class="topnav">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

两者有什么区别：

$selector1 = $('ul.topnav > li');

和

$selector2 = $('ul.topnav').each();

编辑：

$selector2 = $('ul.topnav li').each();

【问题讨论】：

$selector2 = $('ul.topnav').each(); 有了这个，如果你有很多ul.topnav，你只需单独引用它们。使用 $selector1 = $('ul.topnav > li'); 可以访问所有 children LI of .topnav 的 DOM。大不同。

【解决方案1】：

第一个将包含所有li 的直接子元素ul.topnav，第二个将包含所有ul.topnav 元素。

【讨论】：

【解决方案2】：

$('ul.topnav > li') 将直接选择ul 下的所有<li>s。

each 应该将函数作为参数，并遍历所有匹配的<ul> - 它不会不接受子<li>s。如果有的话，你想要$('ul.topnav').children()，如果ul 无论如何都只包含li 元素，那么它是相同的。

例如，这将 alert 每个列表具有的子级数量（在您的情况下，只有数字 3）

$selector2 = $('ul.topnav').each(function(){
   alert($(this).children().length);
});

【讨论】：

【解决方案3】：

第二个将单独评估它们，而第一个将它们作为一个组进行评估

【讨论】：