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

【问题标题】：jQuery table add class for the first matching tbody and add class for last matching tbodyjQuery表为第一个匹配的tbody添加类并为最后一个匹配的tbody添加类
【发布时间】：2018-05-07 16:50:39
【问题描述】：

我有这样的标记

<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 已找到类。现在我想在找到类的thead之后在jQuery中获得下一个找到类的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');
  });

【问题讨论】：

一个<table> 只能有一个<thead> - 你的html 无效（否则你会使用jQuery(this).siblings('tbody.found').first().addClass('first-row');）
是的，我知道这是无效的 html，但结构是这样的。
</tbody class="found last-row"> - 不能在元素的结束标签上放置任何属性，也不能选择标签本身，只能选择元素。

标签： javascript jquery

【解决方案1】：

您的 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')
        }
    }
})

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

【讨论】：

【解决方案2】：

只要这样做：

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');
});

【讨论】：

你能记录下这一行吗 jQuery(this).next().find('tbody.found:first')
我的意思是记录那一行，看看里面有什么