jQuery each looping twice, why?

Question

I've got a script setup, the loop code is here as is the html structure

it basically searches the non-empty id's of the li and puts them into a csv string.

however whenever i run it it always adds an extra loop in my non-fiddle version, so I have, 9 li's, 3 contain IDs, the loop runs 4 times. Why is this?

In my non-dev version it actually picks the ID of the 1st li again and adds it. for example.

1,2,3,4,5,6,1

the 1 would be on the 1st element. no idea why this is doing it?

thanks

score 3 · Answer 1 · answered Nov 24 '11 at 16:43

3

Here is an updated, simpler version:

$("#ingredients").submit(function(event) {
    event.preventDefault(); //Just for testing so the form doesn't submit
    var params = []; //Array of params
    $("li").each(function() {
        if ($(this).prop("id") != "") //Prop always returns a string, empty if no ID
            params.push($(this).prop("id")); //Push the ID into the array
    });
    alert(params.join(",")); //Join the array with a coma
});

http://jsfiddle.net/mPVbE/4/

answered Nov 24 '11 at 16:43

Alex Turpin

46,743
23
113
145

ID not a property, but an attribute? I'm surprised this works. http://www.w3.org/TR/html4/struct/global.html#h-7.5.2 – mrtsherman Nov 24 '11 at 16:53
1

It's more complicated than that. Check [this question](http://stackoverflow.com/questions/5874652/prop-vs-attr). You should use `.prop` 99% of the time. – Alex Turpin Nov 24 '11 at 16:54
`A DOM element is an object. Properties are properties of that object, just like any other programming object. Some of those props get their initial values from the attributes in the markup, which are also stored on the DOM object in a separate map of attributes. In most cases, writing to a prop only changes the prop, although sadly there are some props that write any changes through to the underlying attr (value for instance), but let's try to mostly ignore that. 99% of the time, you want to work with props. If you need to work with an actual attribute, you'll probably know that` – mrtsherman Nov 24 '11 at 17:06
I've broken something else so will try this out soon thanks :) – owenmelbz Nov 24 '11 at 17:11
Thanks Xeon, i tried out your simpler version and it sure enough works in the fiddle. here is it slightly modified http://jsfiddle.net/OwenMelbz/mPVbE/ however when i run it on my main script at http://menu.the-dot.co.uk/body.html?page=find it keeps duplicating the last element. all the source is available on those pages, could you have a look please? thanks – owenmelbz Nov 24 '11 at 18:27
You're gonna have to give me more instructions to reproduce the bug and show me where the code is. – Alex Turpin Nov 24 '11 at 19:38

score 1 · Answer 2 · answered Nov 24 '11 at 16:39

1

You have an extra alert(params); after the .each() in your code. That is responsible for the last alert().

answered Nov 24 '11 at 16:39

aorcsik

15,271
5
39
49

Yes, i noticed that but it still doesnt explain the extra 1, being added to the end agian! – owenmelbz Nov 24 '11 at 17:09

score 1 · Answer 3 · answered Nov 24 '11 at 16:42

1

There is an alert outside the .each() loop in the fiddle example.

I update it: http://jsfiddle.net/IrvinDominin/mPVbE/3/

can be the same problem in your non fiddle code?

answered Nov 24 '11 at 16:42

Irvin Dominin

30,819
9
77
111

hi, just noted above that this was just in the fiddle, im still with the issue where my fist li gets added to the front and end of my string. I guess there is a clash somehwere i'll have to find – owenmelbz Nov 24 '11 at 17:10

jQuery each looping twice, why?

3 Answers3