CODEWITHSUNDEEP
javascriptjqueryloopshtmleach
levi
levi

Reputation: 3521

jQuery loop through Child divs

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

I want to loop though div.cat_ch How?

This one fails:

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

Upvotes: 11

Views: 42298

Answers (8)

Ortiga
Ortiga

Reputation: 8834

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

});

Or

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

});

JQuery's .children method and css3 child selector > will return only the direct children that match the selector, class .cat_ch in the example.

If you want to search deeper in the DOM tree, that is, include nested elements, use .find or omit the child selector:

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

Or

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

Upvotes: 16

spaceman12
spaceman12

Reputation: 1109

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

    //This is by far the fastest in terms of execution speed!!!
    var obj=document.getElementById("ChosenCategory");
    loopOver(obj);
    
Make sure to enclose the each `<div>` tag at the end of each!!

Upvotes: 2

scrappedcola
scrappedcola

Reputation: 10572

http://jsfiddle.net/2TRxh/

I think your issue lies with the attempt to get the val off the div after you get the attribute $(this).attr("name").val(). Using .val() on a div doesn't make sense. If you remove that $(this).attr("name") returns the name property off the divs. You can further specify the div's to loop through by using the class selector in your each rather than just div. $(".cat_ch").each(function () {}); This has been shown in various other answers to this question.

Upvotes: 4

Shyju
Shyju

Reputation: 218962

$(function(){

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

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

});

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

Upvotes: 7

jeff
jeff

Reputation: 8348

If you want to loop through div.cat_ch, you should use that for the jQuery selector:

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

You can also loop through the child elements by using the jQuery children() method:

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

A third way to loop through the desired elements is like so:

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

Use whichever way you want, there is no best way.

Upvotes: 1

tigertrussell
tigertrussell

Reputation: 521

If you only want to target the Divs inside, try

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

The other answers require specific classes and/or will also process non-divs within your parent div.

Upvotes: 4

BlackSpy
BlackSpy

Reputation: 5603

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

Upvotes: 1

Marcus
Marcus

Reputation: 5457

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

Upvotes: 1

Related Questions