Блог

Хорошо, я перебираю «ряд» divs с JQuery.each() помощью функции. И когда я просматриваю их, я настраиваю некоторые атрибуты и изменяю текст.

Все это работает очень хорошо, за исключением первого div. Там параметры не установлены должным образом.

Вот JSFiddle с рабочим кодом

HTML-код может выглядеть следующим образом ( он генерируется динамически ):

 <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>
 

И JS выглядит так (извлечен из обработчика событий onclick для лучшей читаемости для вас, ребята …):

 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);
}
 

Как вы можете видеть в JSFiddle, правильно ли удален сундук, но счетчик не сбрасывается правильно (счетчик — это первый интервал с классом stapel_counter .

Итак, вы, ребята, знаете, что я пропустил?

Дайте мне знать, если вам понадобится дополнительная информация…

Это потому, что вы меняете идентификатор элементов в цикле. После первой итерации вы изменили идентификатор первого элемента на chest_1_11 , но второй элемент также имеет этот идентификатор. При попытке изменить второй элемент вместо этого вы измените первый элемент. Это будет продолжаться до тех пор, пока вы не дойдете до разрыва удаленного элемента, где вы получите идентификатор, который не используется другим элементом, и после этого элементы будут изменены правильно.

Вместо того, чтобы получать идентификатор элемента, а затем создавать селектор с использованием идентификатора, просто получите сам элемент. Это решает вашу проблему с доступом к элементам с конфликтующим идентификатором:

 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--;
  });
}
 

Демонстрация: http://jsfiddle.net/Q92na/2 /