javascript - jQuery 仅选择主表中的 tr/td，而不选择嵌套表

Question

html代码

<table class="fruits" border="1">
<tr>
    <td>Apple</td>
    <td>$2.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Apple</td>
</tr>
<tr>
    <td>Pineapple</td>
    <td>$2.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Pineapple</td>
</tr>
<tr>
    <td>Watermelon</td>
    <td>$3.20</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Watermelon</td>
</tr>
<tr>
    <td>Orange</td>
    <td>$1.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Orange</td>
</tr>

jQuery

var table = $("table");
table.find('tr').each(function (i) {
    var $tds = $(this).find('td'),

    fruit = $tds.eq(0).text(),
    buy = $tds.eq(3).text()         

    alert(fruit +" "+ buy);     
});

我想单击按钮并选择第 1 列和第 4 列中的项目，但那是另一个嵌套表，因此 jQuery 中的编码给了我错误的信息。任何人都可以帮助我下面的 jQuery 吗？

Answer 1

以下方法基于“积极思考”:我们不排除内部表，而是仅包含外部表和正确的元素:

$("table.fruits > tbody > tr")
.each(function (i) {
    var $tds = $(this).children('td'),
    fruit = $tds.eq(0).text(),
    buy = $tds.eq(3).text()         
    console.log(fruit +" "+ buy);     
});

如果表可能包含thead元素，代码可能需要修改。

这个简单的版本只是使用选择器 table.fruits > tbody > tr 选择外表的所有行(但不是任何内表的任何行)。 。在 DOM 中，tr元素不会显示为 table 的子元素但是 tbody (或 thead )，即使没有 <tbody>使用标记。

处理一行时，最好使用children()方法，仅选择直系后代(子代)。