时间戳

首页 > 解决方案 > Javascript只改变循环中的每一秒元素

javascript - Javascript只改变循环中的每一秒元素

问题描述

我编写了以下代码，它应该替换 for 循环内评估为 0 或 1 的值。但它只会将表中的每隔一个元素更改为对应的开关元素。我在这里做错了什么？我尝试了代码，$("td[headers='blub']").eq(i).text("false") \.text("true")它正确地更改了每个值......所以它与 appendchild 有关系......我也尝试在每次迭代后删除孩子但不能正常工作

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>

标签： javascriptjqueryfor-loopdomappendchild

解决方案

有多个问题：

  • 该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")
        )
    );
});

推荐阅读