Reputation: 3521
<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
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
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
Reputation: 10572
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
Reputation: 218962
$(function(){
var items=$(".cat_ch")
$.each(items,function (index,item) {
alert($(item).attr("name"));
});
});
Working sample : http://jsfiddle.net/GzKHA/
Upvotes: 7
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
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
Reputation: 5603
$('.cat_ch').each(function(i, e) {
alert('FW');
alert(e.attr('name').val());
});
Upvotes: 1
Reputation: 5457
$(".cat_ch").each(function () {
alert("FW");
alert($(this).attr("name").val());
});
Upvotes: 1