在元素组

Question

我认为我非常接近只需要关于如何将$（this）集成到我的函数中的最后一点。

我试图查看parentDiv是否包含childDiv，然后删除所述parentDiv上的边框（全部由类定义）。

到目前为止，我有：

＆＃13;

＆＃13;

$(function() {
  var parentDiv = document.getElementsByClassName("class1");
  var childDiv = document.getElementsByClassName("class2");

  if ($(childDiv, parentDiv).length) {
    $(parentDiv).addClass("noborder");
  }

});

＆＃13;

＆＃13;

＆＃13;

想象一下 HTML ，如下所示，目标是在第二个 class1 上读取：class =＆＃34; class1 noborder＆＃34;因为class1包含class2

＆＃13;

＆＃13;

<div class="class1">
  <div class="bla"></div>  
  <div class="bla"></div>  
  <div class="bla"></div>
  <div class="bla"></div>
</div>
<div class="class1">
  <div class="bla"></div>  
  <div class="class2"></div>  
  <div class="bla"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

目前我显然正在替换所有的parentDiv，但我想针对 if test 正在进行的特定目标，任何帮助表示

Answer 1

由于您不介意使用jQuery，您可以使用.has()函数来实现

＆＃13;

＆＃13;

$(function(){
  $(".class1").has(".class2").addClass('noborder');
});

＆＃13;

.class1 {
  width: 50px;
  height: 50px;
  background: yellow;
  margin: 10px;
  border: 1px solid red;
}

.noborder {
  border: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
  <div class="bla"></div>  
  <div class="bla"></div>  
  <div class="bla"></div>
  <div class="bla"></div>
</div>
<div class="class1">
  <div class="bla"></div>  
  <div class="class2"></div>  
  <div class="bla"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用jQuery :has selector或has() method

$('.class1:has(.class2)').addClass('border');


// add content for demo
$('.class1').children().text(function(){
  return $(this).attr('class')
})

.border{border: 1px solid green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
  <div class="bla"></div>  
  <div class="bla"></div>  
  <div class="bla"></div>
  <div class="bla"></div>
</div>
<div class="class1">
  <div class="bla"></div>  
  <div class="class2"></div>  
  <div class="bla"></div>
</div>

Answer 3

if(jQuery('#class1').find('.class2').length !== 0){
   jQuery('#class1').addClass("noborder");
}

这应该有用。