Question

如何获得div元素中的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的数量，如果有超过1个div，则应该将类.lbcursor添加到img。

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

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

Answer 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" : "";
      });
});

Answer 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元素是同一元素的直接子元素时才会起作用（如问题中所示）。

Answer 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');

Answer 4

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

我认为您的代码应如下所示：

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

（重构要做）。

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

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

4 个答案: