jQuery表格行中的每个循环[重复]答案

【问题标题】：jQuery each loop in table row [duplicate]jQuery表格行中的每个循环[重复]
【发布时间】：2012-05-03 13:04:27
【问题描述】：

我有类似的东西：

<table id="tblOne">
            <tbody>
                <tr>
                    <td>
                        <table id="tblTwo">
                            <tbody>
                                <tr>
                                    <td>
                                        Items
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Prod
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 1
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 2
                    </td>
                </tr>
            </tbody>
        </table>

我已经编写了 jQuery 来循环遍历每个 tr，例如：

$('#tblOne tr').each(function() {...code...});

但问题是它循环通过“tblTwo”的“tr”也是我不想要的。任何人都可以提出解决这个问题的建议吗？

【问题讨论】：

标签： javascript jquery html-table each tablerow

【解决方案1】：

在 jQuery 中只需使用：

$('#tblOne > tbody  > tr').each(function() {...code...});

使用孩子选择器 (>)，您将遍历所有孩子（而不是所有后代），例如三行：

$('table > tbody  > tr').each(function(index, tr) { 
   console.log(index);
   console.log(tr);
});

结果：

0
<tr>
1 
<tr>
2
<tr>

在 VanillaJS 中，您可以使用 document.querySelectorAll() 并使用 forEach() 遍历行

[].forEach.call(document.querySelectorAll('#tblOne > tbody  > tr'), function(index, tr) {
    /* console.log(index); */
    /* console.log(tr); */
});

【讨论】：

@Raynos 请解释一下，而不是“hit-and-running”...
函数内如何引用tr元素？
@Rubiksmomo - 使用函数（索引，元素） - api.jquery.com/each

【解决方案2】：

只是一个建议：

我推荐使用 DOM 表实现，它非常简单易用，你真的不需要 jQuery 来完成这项任务。

var table = document.getElementById('tblOne');

var rowLength = table.rows.length;

for(var i=0; i<rowLength; i+=1){
  var row = table.rows[i];

  //your code goes here, looping over every row.
  //cells are accessed as easy

  var cellLength = row.cells.length;
  for(var y=0; y<cellLength; y+=1){
    var cell = row.cells[y];

    //do something with every cell here
  }
}

【讨论】：

我同意 jQuery 对于这类任务通常不是必需的（尤其是在带有.querySelectorAll() 的较新浏览器上）但是如果你已经包含了 jQuery，那么不使用它是一种浪费（和 DOM两个for 循环的解决方案不是那么简单，恕我直言）
但是如果你已经包含了 jQuery，那么你做错了，需要尽快删除它
使用 jQuery 也有后果。 $() 在通过它的 id 实际选择你的元素之前做了大约 100 件事（例如）。我并不是说不要使用它......但是对于像这样的微不足道的事情，vanilla js 解决方案就像要写几个字符一样，您可以节省处理时间。虽然不多......但是为什么当你可以做 10 000 000 时，为什么要每秒 10 000 ......才有意义呢？
@F.Calderan 我明白你的意思，但就像我说的，这是一个建议，因为它非常直截了当。在这里不会发生诸如意外选择更多表之类的事情，并且使用 for 循环的迭代非常快。

【解决方案3】：

使用immediate children selector>：

$('#tblOne > tbody  > tr')

说明：选择所有由“child”指定的直接子元素 “父”指定的元素。

【讨论】：