jQuery 循环遍历子 div答案

【问题标题】：jQuery loop through Child divsjQuery 循环遍历子 div
【发布时间】：2012-07-22 02:28:07
【问题描述】：

<div id="ChosenCategory" class="chosen">
   <div class="cat_ch" name="1">
   <div class="cat_ch" name="2">
   <div class="cat_ch" name="3">
   <div class="cat_ch" name="5">
   <div class="clear"> </div>
</div>

我想循环通过div.cat_ch 怎么办？

这个失败了：

    $("div").each(function () {
       alert("FW");
       alert($(this).attr("name").val());
    });

【问题讨论】：

看起来像一个列表。因此，应该是UL/LI，而不是DIV/DIV。此外，如果您在父级上设置overflow:auto，则可以避免“清除”DIV。
$('.cat_ch').each(function(){});
我很确定name 不是div 元素的有效属性。

标签： javascript jquery loops html each

【解决方案1】：

$(".cat_ch").each(function () {
       alert("FW");
       alert($(this).attr("name").val());
    });

【讨论】：

【解决方案2】：

如果你想循环遍历div.cat_ch，你应该使用它作为 jQuery 选择器：

$("div.cat_ch").each(function () {
   alert("FW");
   alert($(this).attr("name").val());
});

您还可以使用 jQuery children() 方法循环遍历子元素：

$("#ChosenCategory").children().each(function () {
   alert("FW");
   alert($(this).attr("name").val());
});

循环遍历所需元素的第三种方法如下：

$("#ChosenCategory > div").each(function () {
   alert("FW");
   alert($(this).attr("name").val());
});

随心所欲，没有最好的方法。

【讨论】：

【解决方案3】：

$('#ChosenCategory').children('.cat_ch').each(function() {

});

或者

$('#ChosenCategory > .cat_ch').each(function() {

});

JQuery 的 .children 方法和 css3 子选择器 > 将仅返回与选择器匹配的直接子代，示例中为类 .cat_ch。

如果要在 DOM 树中进行更深的搜索，即包含嵌套元素，请使用 .find 或省略子选择器：

$('#ChosenCategory').find('.cat_ch').each( function(){} )

或者

$('#ChosenCategory .cat_ch').each( function(){} )

【讨论】：

【解决方案4】：

$('.cat_ch').each(function(i, e) {
    alert('FW');
    alert(e.attr('name').val());
});

【讨论】：

【解决方案5】：

如果你只想定位里面的Divs，试试

$('#ChosenCategory div').each( function() {...} );

其他答案需要特定的类和/或还将处理您父 div 中的非 div。

【讨论】：

警告！这也会击中你的“清除” div，你可以通过 $('#ChosenCategory div:not(.clear)') 来避免这种情况
是的，你为什么不把选择器改成$('#ChosenCategory div.cat_ch') ？
虽然 OP 确实有这些类，但问题实际上被表述为“循环遍历子 div”，所以我想给出一个答案，以反映如何循环遍历子 div 而不管他们的名字如何.页面布局在应用程序的开发过程中经常发生变化，有时不必为了匹配不同的选择器而重写你的 javascript。

【解决方案6】：

$(function(){

    var items=$(".cat_ch")
     $.each(items,function (index,item) {

       alert($(item).attr("name"));
    });

});

工作样本：http://jsfiddle.net/GzKHA/

【讨论】：

【解决方案7】：

http://jsfiddle.net/2TRxh/

我认为您的问题在于在获得属性$(this).attr("name").val() 后尝试从 div 中获取 val。在 div 上使用 .val() 没有意义。如果您删除该 $(this).attr("name") 会从 div 中返回 name 属性。您可以通过在 each 而不仅仅是 div 中使用类选择器来进一步指定要循环的 div。 $(".cat_ch").each(function () {}); 这已在此问题的其他各种答案中有所体现。

【讨论】：

【解决方案8】：

函数 loopOver(obj) { var chl=obj.firstChild; 而(chl) { 如果（chl.nodeType==1） { var isAttr=chl.getAttribute('name'); 如果（是属性） { 警报（isAttr）； } } chl=chl.nextSibling; } } //这是迄今为止执行速度最快的！！！ var obj=document.getElementById("ChosenCategory"); 循环（对象）；

Make sure to enclose the each `<div>` tag at the end of each!!

【讨论】：