[英]Add class to ALL matching parent div
Ok, this seems simple but I am not able to solve it for some hours. 好的,这似乎很简单,但是我几个小时都无法解决。
Following are four div.testName
, what I want is: if div.testName
contains child div#wrong
then it must add class wrongParent
to that specific parent. 以下是四个div.testName
,我想要的是:如果div.testName
包含子div#wrong
那么它必须wrongParent
特定父级添加类wrongParent
。 Similarly, if div.testName
contains child div#right
then it must add class rightParent
to that specific parent. 同样,如果div.testName
包含子div#right
则必须将class rightParent
添加到该特定父对象。
Now if there are 3 div#wrong
then 3 div.testName
must also have 3 wrongParent
assigned to them one for each div
. 现在,如果存在3个div#wrong
则3个div.testName
还必须为每个div
分配3个wrongParent
。
I have created fiddle here 我在这里制造了小提琴
Please help 请帮忙
$( "#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>
Change your id
to class
将您的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.