Question

我正在尝试做与this question相同的操作，但是我的父元素没有ID。它确实有一个通过类。基本上，我有多个相同类的元素，有些有一个子元素。如果类example的成员包含子项，请进行一些CSS更改。这可能吗，我该怎么办？

例如：

<div class="example">
    <div id="findMe"></Div>
</div>
<div class="example">
  <!-- This div would not be found -->
</div>

我的猜测是：

let parents = $(".example");
for (var i=0; i < parents.length; i++) {
    if (parents[i].find('#test').length) {
        parents[i].css("prop", "value")
    }
}

但parents[i].find is not a function

Answer 1

因此，文档中不应有多个具有相同ID的实例。但是在您的示例中，您非常接近。但是，如果您已经在使用jQuery，它将使您的生活更加轻松。

<div class="example">
    <div class="findMe"></Div>
</div>
<div class="example">
  <!-- This div would not be found -->
</div>

jQuery：

（我使用$表示不需要的jQuery集合）

jQuery集合（在本例中为find创建）始终具有长度。因此，您需要测试它是否为空。另外，$ .each（）基本上遍历了整个集合。

let $parents = $('.example');
$parents.each(
    function(){
      var $el = $(this);
      if($el.find('.findMe').length !=0){
         $el.css('background', 'red');
      }
    }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100px;" class="example">
    <div class="findMe">Hello, World!</Div>
</div>
<div style="height:100px;border: solid 1px #000" class="example">
  <!-- This div would not be found -->

</div>

Answer 2

正如Heretic Monkey在上面的评论中所说，您可以使用jQuery中的has来轻松地做到这一点。

$(".example").has(".findMe").css("background-color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100px;" class="example">
    <div class="findMe">Hello, World!</Div>
</div>
<div style="height:100px;border: solid 1px #000" class="example">
  <!-- This div would not be found -->
</div>

使用jQuery

2 个答案: