jQuery如何将类添加到特定的div答案

【问题标题】：jQuery how to add class to specific div'sjQuery如何将类添加到特定的div
【发布时间】：2012-04-06 03:43:15
【问题描述】：

有没有办法通过 jquery 将一个类添加到所有包含 ul 且只有一个列表元素的 div（如 div.filter_7）。使用 jQuery，我需要遍历每个 div.list-container 并计算列表元素。如果列表元素小于 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);
    }              
    });
});

【问题讨论】：

我们是否可以安全地假设每个<div> 将只包含一个<ul>，或者我们是否需要考虑一个<div>，它有一个<ul>，只有一个元素第二个 <ul> 有多个元素（如果我们这样做，是否应该隐藏它？）。
等等...它是“低于两个”还是“只有一个”列表项。空列表是否也会获得 noshow 类？您的代码与您的问题不完全匹配。

标签： jquery html filter each addclass

【解决方案1】：

您不需要过滤或每个...

您可以将jQuery.has() 与:only-child 结合使用。可以在this jsFiddle 演示和下面的代码中看到。

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

WAY 阅读起来比使用过滤器更干净。您可以稍微修改一下 has 以使其更具体。

【讨论】：

【解决方案2】：

很难准确计算出您想要的内容，因为您的文本与您的 html 或示例 JS 完全不匹配，但请尝试以下操作：

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

示例 - http://jsfiddle.net/infernalbadger/hyCaJ/

【讨论】：

【解决方案3】：

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

您可以使用.filter() 将更高级的逻辑应用于结果集（返回 true 将元素保留在集合中，而返回 false 将其从集合中移除。

小提琴示例：http://jsfiddle.net/pMvHu/1/

【讨论】：

刚刚发现您试图将类应用到父 div (.filter-holder)，而不是列表容器 (.list-container)。代码已更新。

【解决方案4】：

试试下面的脚本，

DEMO

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

【讨论】：

【解决方案5】：

尝试改用'.length：

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

http://jsfiddle.net/we8Jj/

【讨论】：

jquery size() 和长度是一样的:)

【解决方案6】：

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

【讨论】：

【解决方案7】：

您必须计算每个ul 中的li。

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

DEMO

【讨论】：

【解决方案8】：

假设“link_shopall”为div id，则添加class active

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

删除

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

【讨论】：