javascript - 使用 jQuery 将更改应用于包含特定子元素的所有父元素

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 不是一个函数

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>