Как изменить класс div в соответствии с содержанием этого?

Question

Я хочу изменить класс div, если длина LI больше 3. и если меньше 3, тогда имя класса должно быть по умолчанию, как « content », и если больше 3, то class имя должно быть " scroll-content "

    <div class="classname">

<ul>
 <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
</ul>
    </div>

Я предпочитаю использовать для этого jQuery,

Answer 1

Попробуйте:

$("ul").each(function() {
  $(this).parents("div.classname:first")
    .addClass($(this).children().length > 3 ? "scroll-content" : "content");
});

или, может быть, что-то вроде:

$("div.classname").each(function() {
  $(this).addClass($(this).find("ul").children().length > 3 ? "scroll-content" : "content");
});

Answer 2

Это можно сделать с помощью одного звонка и без условий

$('ul li:nth-child(4)')
   .closest('div')
   .removeClass('content')
   .addClass('scroll-content');

Предполагается, что вашим классом по умолчанию является «контент», как вы предложили.

Этот вызов находит любой ul с как минимум 4 дочерними элементами (т. Е. Более 3), затем находит ближайший div, являющийся родительским, удаляет класс по умолчанию и добавляет класс содержимого прокрутки.

Answer 3

$(function() {
    if ( $("div.classname > ul li" ).length > 3 )
    {
        $("div.classname").removeClass().addClass('anotherclass');
    }
    else if ( ...)
    {
        // add another class
    }
});