无法从 jquery 每个循环添加样式类或访问元素的属性答案

【问题标题】：Unable to add style class or access elements' attributes from jquery each loop无法从 jquery 每个循环添加样式类或访问元素的属性
【发布时间】：2017-01-03 07:13:44
【问题描述】：

我有一张桌子，看起来像这样：

<table id="ctoTable" class="table table-bordered">
<thead> ... </thead>
<tbody>
    <tr></tr>
    <tr id="kpi#1" class="js-editable"></tr>
    <tr id="kpi#2" class="js-editable"></tr>
    <tr id="kpi#3" class="js-editable"></tr>
    <tr id="kpi#4" class="js-editable"></tr>
    <tr id="kpi#5" class="js-editable"></tr>
    <tr id="kpi#6" class="js-editable"></tr>
    <tr id="kpi#7" class="js-editable"></tr>
    <tr id="kpi#8" class="js-editable"></tr>
    <tr id="kpi#9" class="js-editable"></tr>
    <tr id="kpi#76" class="js-editable"></tr>
    <tr id="kpi#77" class="js-editable"></tr>
    <tr></tr>
</tbody>

我想做某种过滤器，让我可以显示和隐藏一些行。我很确定我可以这样做，但不幸的是它不起作用。不仅我无法添加/删除类，我也无法获取 th 的属性。

jQuery(document).ready(function($) {
    $( "#hideRows" ).click(function() {
        var rows = $('.js-editable');
        $.each(rows, function(index, item) {
            console.log(item);
            //item.addClass("hideElement"); //try to add the class to the tr
            console.log(item.attr("id")); //try to print tr id in console
        });
    });
});

因此只有第一行会被打印出来

<tr id="kpi#1" class="js-editable"></tr>

并且该方法在没有记录任何错误的情况下中断。有人可以向我解释这里发生了什么，我该如何解决这个问题。

【问题讨论】：

你能解释一下“方法中断但没有记录任何错误”是什么意思吗？它是如何打破的？您能否提供一个 JSFiddle 或 JSBin 示例，以便其他人可以验证“没有记录错误”。通常在您提供的示例中没有出现在 Promise 或错误的 try/catch 块中会发现错误吞咽。
不要制作带有八字形的 ID，这很愚蠢，我认为是错误的。

标签： javascript jquery html html-table

【解决方案1】：

问题是循环内的item 是一个dom 元素引用而不是一个jQuery 对象，所以你不能直接从item 访问jQuery 方法。

相反，您需要通过将item 传递给jQuery 来获取item 的jQuery 对象引用，例如$(item)，然后您可以使用jQuery 方法，例如

jQuery(document).ready(function ($) {
    $("#hideRows").click(function () {
        var rows = $('.js-editable');
        rows.each(function (index, item) {
            console.log(item);
            //$(item).addClass("hideElement"); //try to add the class to the tr
            console.log($(item).attr("id")); //try to print tr id in console
        });
    });
});

但如果你只想添加一个类，则不需要使用循环

jQuery(document).ready(function ($) {
    $("#hideRows").click(function () {
        var rows = $('.js-editable');
        rows.addClass("hideElement");
    });
});

还请注意，最好使用.each() 而不是$.each() 来迭代jQuery 对象。

【讨论】：

$.each() 和 .each() 之间的区别不是重要的解决方案。重要的知识点是$(item)。也许您的概要应该首先引用它，然后将$.each() 与.each() 放在不需要循环部分中。
@amsalk 你可能会发现.filter(function) 比.each() 更适合这个：jsbin.com/remewe/1/edit?js,output

【解决方案2】：

如果你写item.attr，它会返回一个错误，因为这样item不是一个jQuery对象。

改成这样：

$(item).attr("id")

【讨论】：

在发布这个anwser之前，我在这里做了一个测试：jsfiddle.net/vdzf3xn8 并查看控制台：Uncaught TypeError: item.attr is not a function ... ;)

【解决方案3】：

console.log($(item).attr("id")) 而不是console.log(item.attr("id"))

jQuery(document).ready(function($) {
    $( "#hideRows" ).click(function() {
        var rows = $('.js-editable');
        $.each(rows, function(index, item) {
            console.log(item);
            //item.addClass("hideElement"); //try to add the class to the tr
            console.log($(item).attr("id")); //try to print tr id in console
        });
    });
});

DEMO

【讨论】：

或者只是console.log(item.id)