Javascript只改变循环中的每一秒元素答案

【问题标题】：Javascript only changing every second element in loopJavascript只改变循环中的每一秒元素
【发布时间】：2021-11-14 04:05:40
【问题描述】：

我编写了以下代码，它应该替换 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);
  }
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】：

text().length 获取$("td[headers='blub']") 的字符串值中的代码点数，而$("td[headers='blub']").eq(i) 获取与"td[headers='blub']" 匹配的ith 元素。两种截然不同的东西。
是的，我使用这个语句是因为 $("td[headers='blub']").text().length 给了我行数，$("td[headers='blub']").eq(i) 我正在遍历每一行 @HereticMonkey
为什么使用 DOM 方法和 jQuery？选择一个并坚持下去。
jQuery 将你从 TypeError 中拯救出来，因为 i 在最后一轮将“越界”
不，我告诉你$("td[headers='blub']").text().length 让你得到这些单元格中文本的长度，而不是行数。如果您想要 table 元素的行数，请搜索 tr（表格行）元素。

标签： javascript jquery for-loop dom appendchild

【解决方案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")
        )
    );
});

【讨论】：

非常感谢！是的，我是 jquery 和 javascript 的新手，所以我做了一个混合。您的代码 sn-p 完美运行！