Search jQuery

jQuery Forum

loop ends prematurely with each()

in Using jQuery • 10 years ago

I think there is something simple I'm missing, but I'm unsure how to fix at this point.

I have a sidebar with a bunch of unordered lists. Each sidebar li item may or may not have a class assigned to it. I need to scan every list item for any with a special class, say: listClass1, listClass2, listClass3. Ignore all others.

My iteration terminates when a list item is reached without any class, i.e. <li>.

The code I have is this:

$('#right li').each(function() {

var classes = $(this).attr('class').split(' ');

var classes = jQuery.grep(classes, function(listClass) {

return ( listClass == 'listClass1' || listClass=='listClass2' || listClass=='listClass3' );

});

for(lc=0; lc<classes.length; lc++) {

$(this).append('<a href="?page='+ classes[lc] +'"><img src="../images/icon/item_'+ classes[lc] +'.gif" /></a>');

}

What am I missing?

}

Replies(10)

kbwood.au

Re: loop ends prematurely with each()

10 years ago

You seem to be missing the end of your each loop. What comes after the for loop?

pactor21

Re: loop ends prematurely with each()

10 years ago

I think you are not building the classes array right.

var classes = $(this).attr('class').split(' ');

The above line is in the .each() and I guess OP is trying to get an class values in the variable, classes, one by one as the loop goes through all li elements. Here is what went wrong. Note that you have a equal sign which I marked red there.

Instead of building an array, the code is replacing the old class attribute value to a new one on every loop. Therefore the result is NOT an array of attributes, it's just one class attribute of the last li tag.

I would suggest you would start with a blank array, and stuff it up as the loop goes through as below. After the .each() loops completes, use the grep filter function to weed out the ones with bad classes.

(By the way, I still don't understand why .split(' ') is there.)

var classes = '';
$('#right li').each(function() {
classes += $(this).attr('class');
});

(2 things to notice here. A: I am using a concatenation operator marked red. B: don't use the keyword var twice as you did in your code. You were redefining the variable there which will do you no good in most cases.)

classes = jQuery.grep(classes, function(listClass) {
return ( listClass == 'listClass1' || listClass=='listClass2' || listClass=='listClass3' );
});

I separated this part out of the loop, because I don't want to do this filtering every time when the loop goes through when I do this once after the looping. Try it and see if it works.

--------------------------------------------------------------------------------

Got jQuery problem? jQuery vault can help you find solutions. Give it a try and find out.

Click jQuery vault to help us help you.

pactor21

Re: loop ends prematurely with each()

10 years ago

OK.. I guess I was smoking crack a little there. It is almost 6 AM here, and I was pulling an all nighter. so pardon me there.

I now know I was just concatenating classes attributes one right after another, I thought I was building an array there, which brings me back to the reason why you had that split(' '); function. I guess we could add a space to the classes string and take it through the split function to make it an array. But something tells me there has to be a direct way that we define the 'classes' array and dump those class attributes to add to the array.

I'm way too tired at the moment to do it in my head now, but we will see what can be done there tomorrow or someone might beat me before I come back to my normal self tomorrow.

charlietfl

Re: loop ends prematurely with each()

10 years ago

$('div').attr('class') will return undefined if none exist

undefined.split() throws error

var classString=$(this).attr('class')

if( classString){

// now split and run loops

}

pactor21

Re: loop ends prematurely with each()

10 years ago

I'm back with the right answer this time.

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
var classes = [];
$('#right li').each(function() {
classes.push($(this).attr('class'));
});
classes = jQuery.grep(classes, function(listClass) {
return ( listClass == 'listClass1' || listClass=='listClass2' || listClass=='listClass3' );
});
alert(classes.length);
});
</script>
</head>
<body>
<div id="right">
<li class="listClass1">Item 1</li>
<li class="listClass2">Item 2</li>
<li>Item 3</li>
<li class="listClass3">Item 4</li>
<li>Item 5</li>
<li class="listClass2">Item 6</li>
</div>
</body>
</html>

This is a script with direct array build-up. It starts with a blank array, and pushes an element into it as the loops goes through. I had the script alert the number of the filtered element with classes, and it looks right to me.

--------------------------------------------------------------------------------

Got jQuery problem? jQuery vault can help you find solutions. Give it a try and find out.

Click jQuery vault to help us help you.

charlietfl

Re: loop ends prematurely with each()

10 years ago

here's a simpler method:

var listClass = ['listClass1','listClass2','listClass3'];

$.each( listClass, function(i,item){
$('.'+item).append('<a href="?page='+ item +'"><img src="../images/icon/item_'+ item +'.gif" /></a>');

});

batten1000

Re: loop ends prematurely with each()

10 years ago

Thank you all for your suggestions. However, none of these seem to be working. I should mention that the issue seems to be related to the difference between <li> and <li class="">. My original code works fine as long as every link is written at least as such: <li class="">. If there is one <li>, the each() terminates there. Super strange.

var classes = $(this).attr('class').split(' ') //console.log brings back ["listClass1", "listClass2", "listClass3"]

var classes = $(this).attr('class') //console.log brings back listClass1 listClass2 listClass3, i need it in an array like above. do i need to just use makeArray method instead to avoid split undefined error?

Any more thoughts? Any list could be empty or have any number of classes, including one of the 3 above. Thanks again!