Проверьте, нечетные или четные дети, и добавьте класс к родителю с помощью jQuery

Question

Как проверить, есть ли в списке нечетные или четные LI, и соответственно добавить класс в UL.

Например: подсчитать LI и нечетные ли они:

<ul class="default-class counted-odd-lis">
  <li></li>
  <li></li>
  <li></li>
</ul>

Или, после подсчета, они даже:

<ul class="default-class counted-even-lis">
  <li></li>
  <li></li>
</ul>

Вот то, что у меня есть до сих пор, и оно не работает.

if ($('ul.default-class > li').length % 2 != 0) {
{
  // Odd
  $('ul.default-class').addClass('counted-odd-lis')
} else {
  // Even
  $('ul.default-class').addClass('counted-even-lis')
}

Answer 1

Непосредственная проблема в вашем коде заключается в том, что у вас есть дополнительный {, который вызывает синтаксическую ошибку.

Однако лог c будет работать только для одного ul.default-class экземпляр. Чтобы это работало для каждого на странице, вам нужно l oop над всеми ними. Это можно сделать, используя неявный l oop, предоставив функцию для addClass(), которая возвращает класс, который будет добавлен на основе числа li в каждом ul. Попробуйте это:

$('ul.default-class').addClass(function() {
  return $(this).children('li').length % 2 == 0 ? 'counted-even-lis' : 'counted-odd-lis'
});

.counted-even-lis { color: #C00; }
.counted-odd-lis { color: #0C0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="default-class">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<ul class="default-class">
  <li>1</li>
  <li>2</li>
</ul>