Question

好吧，我正在循环播放＆＃34;行＆＃34;具有JQuery.each()函数的div。当我循环浏览它们时，我会设置一些属性并改变一些文本。

一切都很好，除了第一个div。那里的param没有正确设置。

Here's an JSFiddle with the working code

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的第一个跨度。

那么你们知道我错过了什么吗？

如果您需要更多信息，请与我们联系......

Answer 1

那是因为你正在改变循环中元素的id。在第一次迭代之后，您已将第一个元素的id更改为chest_1_11，但第二个元素也具有该id。当您尝试更改第二个元素时，您将改为更改第一个元素。这将继续，直到你到达被删除元素的间隙，你得到一个未被其他元素使用的id，然后元素被正确更改。

不是获取元素的id然后使用id构造选择器，而是获取元素本身。这解决了访问具有冲突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--;
  });
}

演示：http://jsfiddle.net/Q92na/2/

.each（）设置具有奇怪行为的属性

1 个答案: