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

$('.allrow').each(function() {
  if ($(this).find('td[rowspan]').length > 2) {
    $(this).addClass('ships');
  }
});

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

Answer 2

Получить все tr элементы и отфильтровать, используя метод filter(). Для фильтрации получите все элементы с атрибутом rowspan (используя с селектором атрибута ) в текущем контексте (текущая строка, используйте this для ссылки) и сравните длину. Наконец, добавьте класс к фильтруемым элементам.

// 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>

Answer 3

Вы должны использовать attr, чтобы прочитать rowspan

см. Фрагмент

$('body .allrow td').filter(function () { 
        let findTdLength = $(this).attr('rowspan');
  console.log(findTdLength);
        if(findTdLength > 2)
        {
            $(this).parent().addClass('ships');
        }
    });

.ships{
  background-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>