jQuery在表格行中的each循环

Question

我有一个类似于：

<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”，这不是我想要的。有人能提供建议来解决这个问题吗？

- ANP

Answer 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); */
});

- Fabrizio Calderan

---

@Raynos请解释一下“hit-and-running”，不要留下任何繁琐的细节，让内容更容易理解。 - Mike Cole

如何在函数内引用表格中的tr元素？ - jumxozizi

使用函数(index, element)方法 - https://api.jquery.com/each/ - FrenkyB

Answer 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
  }
}

- GNi33

---

我同意，对于这种任务，特别是在拥有.querySelectorAll()的较新浏览器中，通常并不真正需要使用jQuery。但是，如果你已经包含了jQuery，不使用它就是浪费（而且使用两个for循环的DOM解决方案并不那么直观，我个人认为）。 - Fabrizio Calderan

@F.Calderan 我明白你的意思，但就像我说的那样，这只是一个建议，因为它非常直截了当。在这里不会发生选择更多表的意外情况，而使用for循环进行迭代也非常快速。 - GNi33

写起来更快，也许吧。运行更快？开玩笑吧。 - Florian Margaine

@F.Calderan，您所说的“更快地编写”，gEBI和.rows版本比原来短了11个字符。即使是id("tblOne").rows，也比$('#tblOne > tbody > tr')少了8个字符。 - Raynos

我曾经编写了一段代码，使用JQuery在表格中进行简单的文本搜索。但是当表格中有6000多行时，它明显变得很慢。后来我改用普通的JS，速度提升了10倍。 - NSjonas

Answer 3

使用子元素选择器 >：immediate children selector。

$('#tblOne > tbody  > tr')

描述：选择由"parent"指定的元素中所有由"child"指定的直接子元素。

- Sarfraz