Javascript 只改变循环中的每个第二个元素

Question

我写了下面的代码，它应该替换 for-loop 中评估为 0 或 1 的值。但它只会将 table 中的每隔一个元素更改为相应的开关元素。我在这里做错了什么？我用 $("td[headers='blub']").eq(i).text("false") \.text("true") 尝试了代码，它正确地更改了每个值...所以它与附加 child 有关...我还尝试在每次迭代后删除 child但工作不正常

var length = $("td[headers='blub']").text().length;

for (var i = 0; i <= length; i++) {
  if ($("td[headers='blub']").eq(i).text() == 1) {
    let la = document.createElement("LABEL");
    la.className = "switch";
    let x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox");
    let sp = document.createElement("SPAN");
    sp.className = "slider round";

    x.checked = true;
    la.appendChild(x);
    la.appendChild(sp);

    $("td[headers='blub']").eq(i).replaceWith(la);
  } else {
    let la = document.createElement("LABEL");
    la.className = "switch";
    let x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox");
    let sp = document.createElement("SPAN");
    sp.className = "slider round";

    x.checked = false;
    la.appendChild(x);
    la.appendChild(sp);

    $("td[headers='blub']").eq(i).replaceWith(la);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

存在多个问题：

length变量设置为一个字符串的长度，而不是匹配DOM个元素的个数.
for 循环应该转到 < length，而不是 <= length
您描述的效果是将 td 元素替换为其他元素的结果，因此您减少了与 $("td[headers='blub']") 匹配的数量，从而使 .eq(i) 跳过您要跳过的下一个元素期待得到。
用其他类型的元素替换td元素会导致无效HTML。您应该保留 td 元素并改为更改其内容。
您将 jQuery 与非 jQuery 方法混合使用。如果你用jQuery，一路走

以下是我的建议：

$("td[headers='blub']").each(function () {
    let checked = $(this).text().trim() == "1";
    $(this).text("").append(
        $("<label>").addClass("switch").append(
            $("<input>", { type: "checkbox", checked }),
            $("<span>").addClass("slider round")
        )
    );
});

Javascript 只改变循环中的每个第二个元素

Javascript only changing every second element in loop

javascript

jquery

dom

for-loop

appendchild