Suliman Sharif Suliman Sharif - 1 month ago 9
jQuery Question

Loop only appending to one element rather than multiple

so I can't seem to figure this one out exactly. I want to append buttons to every container that doesn't have a null id. So in the list of contents there are two items and I would like to append buttons. The problem is that it only appends to the one, the last item in the list. So my question is to why? and how to fix it.

Example Data Set

Contents

0:{item_uuid: null, label: "11"}
1:{item_uuid: "49b661aa-222b-4c3c-a3cc-92db229c500e", label: "24"}
2:{item_uuid: null, label: "25"}
3:{item_uuid: null, label: "31"}
4:{item_uuid: "49b661aa-222b-4c3c-a3cc-92db229c500e", label: "43"}
5:{item_uuid: null, label: "44"}


The Code

for (var i = 0; i < contents.length; i++) {
if (contents[i].item_uuid !== null) {
$('#' + contents[i].label).append(button);
button.setAttribute("class", "button");
}
}

Answer Source

Your code works, but I had some strange results when trying to append the same button twice, that's why i create it in the loop. You may want to make sure you're not appended the same button to multiple containers.

E.G

 for (var i = 0; i < contents.length; i++) {
      if (contents[i].item_uuid !== null) {
        var button = $('<button>blah</button>');
           $('#' + contents[i].label).append(button);
           //button.setAttribute("class", "button");
      }
    }