Question

我有这样的标记

<table class="section-table">
        <thead class="found">
            <tr>
                <th>data 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody class="found">
            <tr>
                <td>data test</td>
            </tr>
        </tbody class="found">
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <th>data 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <thead class="found">
            <tr>
                <th>data 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody class="found">
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody class="found">
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
    </table>

现在你可以看到，在某些thead中有一个名为found的类。在tbody中还有一些tbody发现了类。现在我想在jQuery之后找到类的thead，它将获得下一个第一个tbody，它有类找到tbody并添加类第一行，最后一个找到类的人将是最后一行。所以基本上输出应该像

<table class="section-table">
        <thead class="found">
            <tr>
                <th>data 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody class="found first-row">
            <tr>
                <td>data test</td>
            </tr>
        </tbody class="found last-row">
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <th>data 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <thead class="found">
            <tr>
                <th>data 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody class="found first-row">
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody class="found last-row">
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
    </table>

我试过这个

jQuery('table.section-table').find('thead.found').each(function() {
    jQuery(this).next('tbody.found').addClass('first-row');
    jQuery(this).prev('tbody.found').addClass('last-row');
  });

Answer 1

这样做：

jQuery('table.section-table').find('thead').each(function() {
    jQuery(this).next().find('tbody.found:first').addClass('first-row');
    jQuery(this).next().find('tbody.found:last').addClass('last-row');
});

Answer 2

您的html无效（<table>可以有多个<tbody>元素，但只有一个<thead>元素。因此，您将无法使用普通选择器，例如：

('tbody').siblings('tbody').first().addClass('first-row')

相反，您需要将每个元素循环到<table>

var foundFirst = false;
$('table').children('.found').each(function(index, item){
    if ($(this).is('thead')) {
        foundFirst = false; // reset for next set of tbody elements
    } else {
        if (!foundFirst) {
            $(this).addClass('first-row')
            foundFirst = true; // toggle
        } else {
            $(this).addClass('last-row')
        }
    }
})

请注意，上面假设在<tbody class="found">元素之后的组中不会有两个<thead>

jQuery表为第一个匹配的tbody添加类，并为最后匹配的tbody添加类

2 个答案: