Мне нужно проверить, содержит ли неупорядоченный список более 3 элементов списка, используя JQuery

Question

    if ( $(".facet ul li").length > 3 ) {
        console.log("test");
   }

Я пытаюсь использовать эту простую строку кода, но, похоже, она не ищет количество дочерних элементов, а вместо этого проверяет, больше ли длина, чем 3.

IЯ использую несколько неупорядоченных списков с тем же классом. Цель состоит в том, чтобы добавить кнопку расширения к тем, которые содержат более 3 элементов списка

Answer 1

Если у вас есть несколько списков, вам необходимо проверить количество дочерних li в каждом из них по отдельности, прежде чем добавлять кнопку. Простой способ сделать это с each() и find():

$(".facet ul").each(function() {
  var $ul = $(this);
  if ($ul.find('li').length > 3) {
    $ul.append('<li><button>Expand</button></li>');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="facet">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
  </ul>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
  </ul>
</div>

Однако это можно упростить, используя :has() и селектор :gt(), чтобы избежать явного цикла:

$(".facet ul:has(li:gt(2))").append('<li><button>Expand</button></li>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="facet">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
  </ul>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
  </ul>
</div>

Answer 2

Если ваш HTML похож,

<ul class="facet">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ul class="facet">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>
<ul class="facet">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

Вы можете использовать следующее,

<script>
    $(document).ready(function () {
        $(".facet").each(function (index) {
            if($(this).children([0]).length > 3){
                console.log("more than three");
            }
        });
    });
</script>

Дайте мне знать, если это работает для вас.