iterate over array in jquery

Question

I'm trying to do some validation on a user selecting items from a list. I want to make sure an item is not added twice by checking if the <li> is already in the array. This is what I'm trying and its not working.

 $(".List").on("click", "li", function () {
 var i = 0;
 var checkArr = [];

 var div = $("#AddedItems");
 var parent = $(this).closest("ul");
 var itemtoadd = parent.find("[data-id]").attr("data-id");
 var name = parent.find("[data-name]").attr("data-name");

 alert(itemtoadd + name);//checking 

 var itemtoadd = ("<li id = " + itemtoadd + " class = \"itemAdd\">" + name + "</li>");

 checkArr.push(itemtoadd); //put one in to check against?
 checkArr.forEach(item)
 {
     if (item == itemtoadd)
         alert("this item has already been added");
     else {
         checkArr.push(itemtoadd);
         alert(itemtoadd);
         $(itemtoadd).appendTo(div);
     }
 }
 // div.html(itemtoadd);


 });

You can also just use a regular for loop, that's probably faster. — Jeffpowrs
– Jeffpowrs, Commented Aug 27, 2013 at 19:53
I don't know if this is important to your use case but Array.forEach isn't supported in IE 8 and below. Mozilla Developer link — hradac
– hradac, Commented Aug 27, 2013 at 20:06
Even if you get your for right, you're still going to have two problems, as described in my answer. Handily, you don't actually need a loop here at all. — pkh
– pkh, Commented Aug 27, 2013 at 20:21

pkh · Accepted Answer · 2013-08-27 20:19:08Z

1

You have at least three problems here:

You aren't using Array.forEach correctly -- it takes a function that takes an item.
Immediately before you do your check, you're adding the item you're looking for. You will always hit the alert case.
You're using checkArr as a local variable -- you're getting an empty array each time you enter the function.

That all being said, you can accomplish your goal without keeping an array at all. I believe you can replace everything from your first alert down with this:

if ($('#' + itemtoadd, div).length == 0) {
    itemtoadd = ("<li id = " + itemtoadd + " class = \"itemAdd\">" + name + "</li>");
    div.append(itemtoadd);
}
else {
    alert("this item has already been added");
}

edited Aug 27, 2013 at 20:19

answered Aug 27, 2013 at 19:57

pkh

3,7991 gold badge25 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rogerthat Over a year ago

ok. let me sort this out. My first alert is this? alert(itemtoadd + name);//checking and where does the error message go, in the else?

rogerthat Over a year ago

Also, the user can add up to 4 items so I'm not just checking one item. Every time an item is added I need to check if its already in the div.

pkh Over a year ago

Yes, sorry -- I've updated the answer to reflect adding the error message. ... And yes -- I understand that's what you're trying to do. I was just saying that your code as written doesn't do that. Every time an item is added you're creating a new instance of checkArr.

Collectives™ on Stack Overflow

iterate over array in jquery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related