JQuery, как добавить класс к конкретным div

Question

Есть ли способ добавить класс через jquery ко всем div-элементам, содержащим ul только с одним элементом списка (например, div.filter_7).С jQuery мне нужно пройти через каждый контейнер div.list и посчитать элементы списка.Если элементы списка меньше 2, тогда jquery должен добавить класс.

<div class="filter_group">
<div class="filter-holder filter_1">
<h4>Test</h4>
<div class="list-container">
    <ul class="list filter">
        <li class="list_id1">list_id1</li>
        <li class="list_id2">list_id2</li>
        <li class="list_id3">list_id3</li>
        <li class="list_id4">list_id4</li>
        <li class="list_id5">list_id5</li>
    </ul>
</div>
</div>
<div class="filter-holder filter_2">
<h4>Test</h4>
<div class="list-container">
    <ul class="list filter">
        <li class="list_id11">list_id11</li>
        <li class="list_id22">list_id22</li>
        <li class="list_id33">list_id33</li>
        <li class="list_id44">list_id44</li>
        <li class="list_id55">list_id55</li>
    </ul>
</div>
</div>
<div class="filter-holder filter_6">
<h4>Test</h4>
<div class="list-container">
    <ul class="list filter">
        <li class="list_id111">list_id111</li>
        <li class="list_id222">list_id222</li>
        <li class="list_id555">list_id555</li>
    </ul>
</div>
</div>
<div class="filter-holder filter_7">
<h4>Test</h4>
<div class="list-container">
    <ul class="list filter">
        <li class="list_id1111">list_id1111</li>
        <li class="list_id2221">list_id2222</li>
    </ul>
</div>
</div>

Вот что я сделал с jquery, но это неправильно:

    var total = 0;
$(document).ready(function() {
    $('.list-container').each(function(idx, item){
      total = $(".list-container>ul").size();
          if (6 >= total) {
           $('.list-container').parent('div').addClass('noshow');
    } else {
    alert(total);
    }              
    });
});

Answer 1

Вам не нужно фильтровать или каждый ...

Вы можете использовать jQuery.has () в сочетании с :only-child.Как видно из этой демонстрации jsFiddle и кода ниже.

jQuery("div.list-container").has("li:only-child").addClass("noshow");

ПУТЬ чище, чем при использовании фильтра.Вы можете изменить немного, чтобы сделать его более конкретным.

Answer 2

Трудно понять, что именно вы хотите, так как ваш текст не совсем соответствует вашему HTML или примеру JS, но попробуйте это:

$('div.filter-holder').filter(function() {
    return $(this).find('li').length == 1;
}).addClass('noshow');

Пример - http://jsfiddle.net/infernalbadger/hyCaJ/

Answer 3

$('div.filter-holder').filter(function(){
  return $('div.list-container li',this).length <= 2;
}).addClass('noshow');

Вы можете использовать .filter(), чтобы применить более сложную логику к набору результатов (возвращение true сохраняет элемент в наборе, а возвращение false удаляет его из набора.

Пример Fiddle: http://jsfiddle.net/pMvHu/1/

Answer 4

предположим, что "link_shopall" - это идентификатор id, затем добавить активный класс

$('#link_shopall').classList.add('active')

Удалить

$('#link_shopall').classList.remove('active')

Answer 5

Вы должны посчитать li в каждом ul.

$('div.filter-holder ul').each(function() {
    if($(this).children().length == 1)
    {
        $(this).parent().parent().addClass('test')
    }
});

DEMO

Answer 6

$('div.list-container').each(function() {
    if ($(this).find('ul').length >= 6) {
        $(this).addClass('noshow');
    }
});

Answer 7

попробуйте использовать '.length вместо:

$('.list-container').each(function(){
  if ($('li', this).length <= 2) {
    $(this).parent().addClass('noshow');
  }
});

http://jsfiddle.net/we8Jj/

Answer 8

Попробуйте приведенный ниже скрипт,

DEMO

$('.filter-holder').filter (function () {
   return ($(this).find('ul li').length == 1) //Edit: changed to ==
}).addClass('noshow');