jQuery循环遍历子div

Question

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

- levi

---

看起来像是一个列表。因此，应该使用UL/LI，而不是DIV/DIV。如果在父元素上设置overflow:auto，则可以避免使用“clear” DIV。 - Šime Vidas

$('.cat_ch').each(function(){}); - jeschafe

我非常确定name不是div元素的有效属性。 - David Thomas

Answer 1

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

});

Or

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

});

JQuery的.children方法和CSS3中的子选择器>只返回与示例中类.cat_ch匹配的直接子元素。

如果您想在DOM树中深入搜索，即包括嵌套元素，请使用.find或省略子选择器:

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

或

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

- Ortiga

Answer 2

$(function(){

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

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

});

Working sample : http://jsfiddle.net/GzKHA/

- Shyju

Answer 3

如果您只想针对内部的Div进行定位，请尝试：

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

其他答案需要特定的类或者也会处理你父div中的非div元素。

- tigertrussell

---

注意！这也会影响到你的“clear” div，你可以通过使用$('#ChosenCategory div:not(.clear)')来避免这种情况。 - tigertrussell

为什么不把选择器改成 $('#ChosenCategory div.cat_ch') 呢？ - Stano

尽管OP确实在那里有这些类，但问题的真正表述是“循环遍历子div”，因此我想给出一个答案，反映如何循环遍历子div，而不考虑它们的名称。在应用程序开发中，页面布局经常会发生变化，有时候不必重写您的JavaScript代码以匹配不同的选择器，这样做会更好。 - tigertrussell

Answer 4

我认为你的问题在于尝试在获取属性$(this).attr("name").val()后从div中获取val。在div上使用.val()没有意义。如果你移除它，$(this).attr("name")会返回div的name属性。你可以进一步指定要循环遍历的div，而不仅仅是所有的div。你可以在each中使用class选择器，如$(".cat_ch").each(function () {});这已经在其他回答中得到了说明。

http://jsfiddle.net/2TRxh/

- scrappedcola

Answer 5

    function loopOver(obj)
    {
        var chl=obj.firstChild;
        while(chl)
        {
            if(chl.nodeType==1)
            {
                var isAttr=chl.getAttribute('name');
                if(isAttr)
                {
                    alert(isAttr);
                }
            }
            chl=chl.nextSibling;
        }
    }
//这是执行速度最快的方法！！！
    var obj=document.getElementById("ChosenCategory");
    loopOver(obj);

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

- spaceman12

Answer 6

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

- Marcus

Answer 7

如果您想循环遍历 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());
});

使用任何你想要的方式，没有最好的方式。

- jeff

Answer 8

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

- BlackSpy