Скрыть tbody, если число показанных tr меньше n

Question

У меня есть таблица, которая выглядит следующим образом

<table>
  <tbody>
    <tbody class="green">
        <tr>
            <td>Data</td>
        </tr>
    </tbody>
    <tbody class="blue">
        <tr>
            <td>Data</td>
        </tr>
    </tbody>
 </tbody>
</table>

Можно ли с помощью jquery скрыть каждое тело из таблицы, если число tr внутри тела меньше 2?Я пытался это сделать, но это не сработало.Все tr в таблице были спрятаны.

   $('.table tbody').each(function(){ 
  if($(this).not("tr:hidden").length <2)
    {      
      $(this).parent().find("tbody").hide();
    }
   });

Answer 1

Вы можете использовать find() на this объекте, чтобы найти длину всех tr

$(this).find("tr").length

Затем вы можете использовать this для нацеливания на конкретный элемент tbody, чтобы скрыть.

Обратите внимание: вложено tbody (tbody внутри tbody) недопустимо.

Демонстрация:

$('table tbody').each(function(){ 
  if($(this).find("tr").length < 2){      
    $(this).hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody class="green">
        <tr>
            <td>First tbody Data1</td>
        </tr>
    </tbody>
    <tbody class="blue">
        <tr>
            <td>Second tbody Data1</td>
        </tr>
        <tr>
            <td>Second tbody Data2</td>
        </tr>
    </tbody>
</table>

Answer 2

Вы можете сделать это с помощью vanilla JS довольно легко, просто возьмите все tbodys и проверьте длину их детей на желаемую сумму, а затем установите для дисплея значение non, если оно не соответствует этому порогу.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

const tbodys = document.querySelectorAll('tbody')

Array.from(tbodys).forEach(tbody => {
  const { children } = tbody;
  const threshold = children.length < 2;

  tbody.style.display = threshold ? 'none' : '';
})

.blue {background-color: blue}
.green {background-color: green}

<table>
  <tbody>
    <tbody class="green">
        <tr>
            <td>Data</td>
        </tr>
    </tbody>
    <tbody class="blue">
        <tr>
            <td>Data</td>
        </tr>
         <tr>
            <td>Data</td>
        </tr>
    </tbody>
 </tbody>
</table>

Но если вы хотите просто Jquery

$('table tbody').each(function() {
  if (this.children.length < 2) $(this).hide();
});

.blue {
  background-color: blue
}

.green {
  background-color: green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tbody class="green">
      <tr>
        <td>Data</td>
      </tr>
    </tbody>
    <tbody class="blue">
      <tr>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
      </tr>
    </tbody>
  </tbody>
</table>