jquery如果孩子有超过1个div元素答案

【问题标题】：jquery if children has more than 1 div elementjquery如果孩子有超过1个div元素
【发布时间】：2013-09-26 15:43:21
【问题描述】：

如何获取 li 元素中的 div 数量。

这是我的代码，但它不起作用。（这并不意味着每个 img 都会获得类，即使 li 内只有 1 个 div。）

if($('.lookbook ul li').find('div').length > 1){
    $('.lookbook ul li img').addClass('lbcursor');
}

这是我的html结构：

<div class="lookbook>
    <ul>
        <li>
            <div><img/></div>
            <div></div>
        </li>
        <li>
            <div><img/></div>
            <div></div>
        </li>
        <li>
            <div></img></div>
        </li>
    </ul>
</div>

第三个 img 不应该得到这个类。

我想要 li 元素中 div 的数量，如果 div 超过 1 个，则应将 .lbcursor 类添加到 img。

我确实在这里找到了类似的答案：jquery: if children with specific class? 但它不起作用

啊，我刚刚认识到，if 子句是正确的。问题是我将类添加到哪些元素。

【问题讨论】：

你能定义“不起作用”，是不是找不到 div？还是不添加课程？您在寻找直系后代吗？
我编辑了我的问题。是的，我正在寻找直系后代。
在jsFiddle上放一个示例代码。看不到 HTML 结构。

标签： jquery html css

【解决方案1】：

您需要循环并定位该元素。

$('.lookbook ul li').each(function() {
  var $this = $(this);
  if ($this.find('div').length > 1) { //if looking for direct descendants then do .children('div').length
      $this.find('img').addClass('lbcursor');
  }
});

Fiddle

你也可以这样写：

$('.lookbook ul li').each(function() {
  var $this = $(this);
      $this.find('img').addClass(function(){ //using function argument syntax for addClass
          return $this.find('div').length > 1 ? "lbcursor" : "";
      });
});

【讨论】：

【解决方案2】：

使用:has() 和:nth-of-type() 选择器简洁明了。

$('.lookbook ul li:has(div:nth-of-type(2)) img').addClass('lbcursor');

jsFiddle Demo

P.S - 与 :nth-of-type() 选择器一样，这仅在 div 元素是同一元素的直接子元素时才有效（如您的问题所示）。

【讨论】：

@PSL - 我已经在 IE7 上对其进行了测试，它可以工作。 jQuery (1.x.x) 知道如何在选择元素时处理旧浏览器。
同意，这个答案是这里最整洁的一个 +1

【解决方案3】：

也许将每个与此上下文一起使用，以便您可以使其特定于每个元素：

$('.lookbook ul li').each(function() {
  if ($(this).find('div').length > 1) {
     $('.lookbook ul li img').addClass('lbcursor');
  }
});

[编辑] 如前所述

$('.lookbook ul li img').addClass('lbcursor');

应该是

$(this).find('img').addClass('lbcursor');

【讨论】：

在您的代码中，一旦在任何具有 '.lookbook ul li' 类的元素中找到多个 div，它就会将 lbcursor 类添加到与“.lookbook”匹配的所有元素中ul li img"
已经给出了相同且正确的答案。无论如何，谢谢。
@TimotheusTriebl 就像佐兰克所说，这两个答案不一样。这个答案根本行不通。

【解决方案4】：

您的代码中的条件很好，但是在 if 块中您可以访问所有图像以添加 CSS 类。

我认为你的代码应该是这样的：

if($('.lookbook ul li').find('div').length > 1){
   $('.lookbook ul li img').find('div').addClass('lbcursor');
}

（需要重构）。

注意在 if 块中对 find() 的额外调用。

【讨论】：