Question

The following code adds the same ID to every div sibling:

var d = 0;
var newid = currentId.substring(currentId.length-8, currentId.length-1)+d;

$.each(('table').next(), function() {
    $('table').find('div[id|="edid"]').attr("id", newid);   
    d++;
});

The HTML structure looks like this:

<table><tr><td><div id="edid-0-">text</div></td></tr></table>
<br>
<table><tr><td><div id="edid-0-">text</div></td></tr></table>
<br>
<table><tr><td><div id="edid-0-">text</div></td></tr></table>

After running my code, the IDs should look like: edid-0-0, edid-0-1, edid-0-2, and so on.

But instead, all are either edid-0-0, edid-0-0, did-0-0…
or edid-0-3, edid-0-3, edid-0-3…

depending on where i put the variables (in or outside the each function).

I tried various variations, but it’s always the same ID ending, und no continuing numberation. I kind of understand why this happens, but I have no clue on how solving this problem. Sitting here for hours. My head -> explodes.

Answer 1

Since d is always 0, why dont you just use the index parameter in the function()

Also, you are doing $("table") during each iteration, which will query the dom again. I assume you actually want $(this) which will find the <div/> under the current <table/>

var newid = currentId.substring(currentId.length-8, currentId.length-1)+d;
$.each($('table').next(), function(index, elm) {
    $(this).find('div[id|="edid"]').attr("id", newid + index);   
});