Jquery:新类添加基于行跨度长度的问题

Question

如何根据行跨度长度添加新类。例如，在表中，某些行的行跨度为 td，长度超过 2。我需要在这些行上添加一个新类。

例如:

<table class="table table-border">
        <thead>
        <th>Ship</th>
        <th>Unit</th>
        <th>Branch</th>
        <th>Rank</th>
        <th>Sanc</th>
        </thead>
        <tbody>
        <tr class="allrow">
            <td rowspan="3">CAB1</td>
            <td rowspan="2">HM/CAB</td>
            <td rowspan="2">SEAMAN</td>
            <td>MCPO(X)</td>
            <td>MCPO</td>
        </tr>

        <tr class="allrow">
            <td>FC-I</td>
            <td>FC-J</td>
        </tr>

        <tr class="allrow">
            <td>FC-I</td>
            <td>FC-J</td>
            <td>4</td>
            <td>FC-J</td>
        </tr>
        <tr class="allrow">
            <td rowspan="3">CAB2</td>
            <td rowspan="2">HM/CAB</td>
            <td>SEAMAN</td>
            <td>MCPO(X)</td>
            <td>MCPO</td>
        </tr>

        <tr class="allrow">
            <td>FC-I</td>
            <td>FC-J</td>
            <td>FC-J</td>
        </tr>

        <tr class="allrow">
            <td>FC-I</td>
            <td>FC-J</td>
            <td>4</td>
            <td>FC-J</td>
        </tr>
        <tbody>
    </table>

在上表中，就像第一行的列中存在 3 行跨度 (CAB1,HM/CAB,SEAMAN) 一样，我想添加新类 ships。

我正在尝试的脚本:

$('body .allrow').find('td[rowspan]').filter(function () {
        let findTdLength = $(this).length;
        if(findTdLength > 2)
        {
            $(this).parent().addClass('ships');
        }
    });

有人可以帮助我吗？

Answer 1

获取所有 tr 元素并使用 filter() 过滤掉方法。为了过滤，获取当前上下文(当前行，使用 this 引用)内具有 rowspan 属性(使用 has attribute selector )的所有元素并比较长度。最后，为过滤后的元素添加类。

// get all elements
$('.allrow')
  // iterate over to filter
  .filter(function() {
    // get all elements within the element with rowspan 
    // specify context parameter to filter within
    return $('[rowspan]', this).length > 2;
  })
  // finally add class
  .addClass('ships');

.ships {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-border">
  <thead>
    <th>Ship</th>
    <th>Unit</th>
    <th>Branch</th>
    <th>Rank</th>
    <th>Sanc</th>
  </thead>
  <tbody>
    <tr class="allrow">
      <td rowspan="3">CAB1</td>
      <td rowspan="2">HM/CAB</td>
      <td rowspan="2">SEAMAN</td>
      <td>MCPO(X)</td>
      <td>MCPO</td>
    </tr>

    <tr class="allrow">
      <td>FC-I</td>
      <td>FC-J</td>
    </tr>

    <tr class="allrow">
      <td>FC-I</td>
      <td>FC-J</td>
      <td>4</td>
      <td>FC-J</td>
    </tr>
    <tr class="allrow">
      <td rowspan="3">CAB2</td>
      <td rowspan="2">HM/CAB</td>
      <td>SEAMAN</td>
      <td>MCPO(X)</td>
      <td>MCPO</td>
    </tr>

    <tr class="allrow">
      <td>FC-I</td>
      <td>FC-J</td>
      <td>FC-J</td>
    </tr>

    <tr class="allrow">
      <td>FC-I</td>
      <td>FC-J</td>
      <td>4</td>
      <td>FC-J</td>
    </tr>
    <tbody>
</table>