將類添加到所有匹配的父div

Question

好的，這似乎很簡單，但是我幾個小時都無法解決。

以下是四個div.testName ，我想要的是：如果div.testName包含子div#wrong那么它必須wrongParent特定父級添加類wrongParent 。 同樣，如果div.testName包含子div#right則必須將class rightParent添加到該特定父對象。

現在，如果存在3個div#wrong則3個div.testName還必須為每個div分配3個wrongParent 。

我在這里制造了小提琴

請幫忙

$( "#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>im right</span>').insertBefore($(this).prev()); }); $( ".wrong" ).each(function( ) { $(this).parent().addClass('wrongParent'); $('<span>im 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>