在具有特定类的元素内循环

Question

我有以下HTML.有人可以请告诉我如何循环遍历所有div类"tab-pane"与该类,并查看其中的任何元素div是否有一个类 "input-validation-error",然后只是更改它的背景颜色div.

在这个例子中,第一div和第三div与"tab pane"类应该有自己的background属性的变化.我知道如何遍历每个但不确定如何在子元素中查找特定属性.

  <ul id="sellerAppTabs">
                            <li title="General Information"><a href="#tab" data-toggle="tab">Section I</a></li>
                            <li title="Affiliate Information"><a href="#tab1" data-toggle="tab">Section II</a></li> 
<li title="Affiliate Information"><a href="#tab1" data-toggle="tab">Section II</a></li> 
                        </ul>

<div class="tab-pane" id="tab">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
<input type="text" class="input-validation-error">
</div>
</div>

<div class="tab-pane" id="tab1">
<div class="test2">
<h1>Some Data</h1>
<input type="text">
<input type="text">
</div>
</div>

<div class="tab-pane" id="tab2">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
<input type="text" class="input-validation-error">
</div>
</div>

所以我必须遍历asellerAppTabs ul部分中的标签,这些标签与ids匹配div,然后如果div有任何"input-validation-error"类,那么我必须更改标签li上方的背景颜色a.

Answer 1

使用.has()或:has()

$('.tab-pane').has('.input-validation-error').css({background: '#C55'})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane">
	<div class="test1">
		<h1>Some Data</h1>
		<input type="text" class="input-validation-error">
		<input type="text" class="input-validation-error">
	</div>
</div>

<div class="tab-pane">
	<div class="test2">
		<h1>Some Data</h1>
		<input type="text">
		<input type="text">
	</div>
</div>

<div class="tab-pane">
	<div class="test1">
		<h1>Some Data</h1>
		<input type="text" class="input-validation-error">
		<input type="text" class="input-validation-error">
	</div>
</div>