jquery - .each() setting attribute with weird behavior -

jquery - .each() setting attribute with weird behavior -

alright, i'm looping through "row" of divs jquery.each() function. , when i'm looping through them, setup attributes , alter text.

it works well, except first div. there param's aren't set properly.

here's jsfiddle working code

the html ( it's dynamically generated )

<div dir="rl" id="row_1" class="obstacle cv_row_rl rows ui-draggable ui-droppable" style="position: absolute; left: 10px; top: 50px;"> <div class="cv_chest" id="chest_1_12" chest_height="1"><span class="stapel_counter">12</span><span class="stapel_height">1</span> </div> <div class="cv_chest" id="chest_1_11" chest_height="1"><span class="stapel_counter">11</span><span class="stapel_height">1</span> </div> <div class="cv_chest" id="chest_1_10" chest_height="1"><span class="stapel_counter">10</span><span class="stapel_height">1</span> </div> <div class="cv_chest" id="chest_1_9" chest_height="1"><span class="stapel_counter">9</span><span class="stapel_height">1</span> </div> <div class="cv_chest" id="chest_1_8" chest_height="1"><span class="stapel_counter">8</span><span class="stapel_height">1</span> </div> <div class="cv_chest" id="chest_1_7" chest_height="1"><span class="stapel_counter">7</span><span class="stapel_height">1</span> </div> <div class="cv_chest" id="chest_1_6" chest_height="1"><span class="stapel_counter">6</span><span class="stapel_height">1</span> </div> <div class="cv_chest" id="chest_1_5" chest_height="1"><span class="stapel_counter">5</span><span class="stapel_height">1</span> </div> </div>

and js looks (pulled out of onclick event handler improve readability guys... ):

var chest_id = "chest_1_6"; function removeit() { var parent_id = $('#' + chest_id).parent().attr('id'); $("#" + chest_id).remove(); var row = $("#" + parent_id); var dir = $(row).attr("dir"); var length = $("#" + parent_id + " > div.cv_chest").length; var tmpcounter = 1; var chest_split = chest_id.split('_'); var chest_base = chest_split[0] + "_" + chest_split[1] + "_"; $("#" + parent_id + " > div.cv_chest").each(function (i, obj) { var chestid = $(obj).attr('id'); log(length); log(chestid); log(chest_base + length); $("#" + chestid + " > .stapel_counter").html(length); $("#" + chestid).attr('id', chest_base + length); length--; }); } function log(msg) { console.log(msg); }

as can see in jsfiddle, chest removed, count isn't resetted right ( count first span class stapel_counter.

so guys know did miss?

let me know if need more information...

that's because changing id of elements in loop. after first iteration have changed id of first element chest_1_11, sec element has id. when seek alter sec element alter first element instead. go on until gap of removed element id not used element, , after elements changed correctly.

instead of getting id of element , build selector using id, element itself. solves problem accessing elements conflicting id:

function removeit() { var row = $('#' + chest_id).parent(); $("#" + chest_id).remove(); var dir = row.attr("dir"); var length = $("div.cv_chest", row).length; var tmpcounter = 1; var chest_split = chest_id.split('_'); var chest_base = chest_split[0] + "_" + chest_split[1] + "_"; $("div.cv_chest", row).each(function (i, obj) { var chest = $(obj); $(".stapel_counter", chest).html(length); chest.attr('id', chest_base + length); length--; }); }

demo: http://jsfiddle.net/q92na/2/

jquery each