7

如何获得 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 子句是正确的。问题是我将类添加到哪些元素。

4

4 回答 4

16

您需要遍历并定位该元素。

$('.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');
  }
});

小提琴

你也可以这样写：

$('.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" : "";
      });
});
于 2013-09-26T15:51:39.450 回答
13

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

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

jsFiddle 演示

  • PS - 与:nth-of-type()选择器一样，这仅在div元素是同一元素的直接子元素时才有效（如您的问题所示）。
于 2013-09-26T15:52:51.933 回答
2

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

$('.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');
于 2013-09-26T15:49:52.860 回答
1

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

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

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

（要进行重构）。

find()注意if 块内的额外调用。

于 2013-09-26T15:52:19.847 回答