javascript - 将类添加到所有匹配的父 div

Question

好吧，这看起来很简单，但我几个小时都无法解决它。

下面是四个div.testName，我想要的是: 如果 div.testName 包含子 div#wrong 那么它必须将类 wrongParent 添加到该特定父级。 同样，如果 div.testName 包含子 div#right，则它必须将类 rightParent 添加到该特定父级。

现在，如果有 3 个 div#wrong，则 3 个 div.testName 还必须有 3 个 wrongParent 分配给它们，每个 >div.

我创建了 fiddle here

请帮忙

$( "#right" ).each(function() {
    $(this).parent().addClass('rightParent');
    $('<span>i m right</span>').insertBefore('.testName .head > h3');
});         
$( "#wrong" ).each(function() {
    $(this).parent().addClass('wrongParent');
    $('<span>i m wrong</span>').insertBefore('.testName .head > h3');
});

<div class="testName">
    <div class="head">
        <h3>wrong heading</h3>
    </div>
    <div id="wrong"></div>
 </div>
 <div class="testName">
     <div class="head">
         <h3>wrong heading</h3>
     </div>
     <div id="wrong"></div>
 </div>
 <div class="testName">
     <div class="head">
         <h3>right heading</h3>
     </div>
     <div id="right"></div>
 </div>
 <div class="testName">
     <div class="head">
         <h3>right heading</h3>
     </div>
     <div id="right"></div>
 </div>

Answer 1

将您的id更改为class

$( ".right" ).each(function( ) {
	$(this).parent().addClass('rightParent');
	$('<span>i m right</span>').insertBefore($(this).prev());
});
			
$( ".wrong" ).each(function( ) {
	$(this).parent().addClass('wrongParent');
	$('<span>i m wrong</span>').insertBefore($(this).prev());
});

.testName { 
  width:90%;
  float: left;
  margin: 10px;
  border: solid 4px grey;
}
.rightParent {
  border: solid 4px green;
}
.wrongParent {
  border: solid 4px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="testName">
    <div class="head">
      <h3>wrong heading</h3>
    </div>
    <div class="wrong">
    </div>
 </div>
 
 <div class="testName">
    <div class="head">
      <h3>wrong heading</h3>
    </div>
    <div class="wrong">
    </div>
 </div>
 
  <div class="testName">
    <div class="head">
      <h3>right heading</h3>
    </div>
    <div class="right">
    </div>
 </div>
 
 <div class="testName">
    <div class="head">
      <h3>right heading</h3>
    </div>
    <div class="right">
    </div>
 </div>