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

我有下面的HTML。有人能告诉我如何使用类

“选项卡窗格”

遍历所有

div

s，并查看

div

中的任何元素是否有类吗

“输入验证错误”

，然后只需更改该

div的背景色即可

在本例中，第一个
div
类和第三个
div
类以及
“选项卡窗格”
类的背景属性应该更改。我知道如何循环每个元素，但不确定如何在子元素中查找特定属性

  <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>






一些数据
一些数据
一些数据

因此，我必须在sellerAppTabs
ul
部分的
a
标签中循环，这些标签的
id
s与
div
s匹配，然后如果
div
有任何
输入验证错误
class然后我必须更改
a
标记上方
li
的背景色。
因为您使用的是jQuery，一个简单的
。每个（）
函数就足够了。然后是输入验证类的
.find（）

$('.tab-pane').each(function(){
    $(this).find('.input-validation-error').each(function() {
        //change the color
    });
});

不需要循环。只需使用：has（）选择器


$（'.tab窗格：has（.input validation error））.css（'background'，'red'）

一些数据
一些数据
一些数据
您可以使用
每一个
和
查找
：

$(".tab-pane").each(function() {
    if ($(this).find(".input-validation.error")) {
        // $(this) points to the div.tab-pane!
        $(this).css("background-color", "red")
    }
});

使用
过滤所需的元素
迭代
[].filter.call(
document.querySelectorAll（“.tab窗格”），
函数（elem）{return elem.querySelector（'.input validation error'）；}
).forEach（函数（elem）{elem.style.backgroundColor=color；}）；


[].filter.call(
document.querySelectorAll（“.tab窗格”），
函数（elem）{return elem.querySelector（'.input validation error'）；}
).forEach（函数（elem）{elem.style.backgroundColor='#C55'；}）

一些数据
一些数据
一些数据
使用或


$（'.tab pane'）.has（'.input validation error'）.css（{background:'#C55'}）

一些数据
一些数据
一些数据
您可以使用JQuery筛选器功能：

$('.tab-pane')
  .filter(':has(.input-validation-error)');
  .css('background', 'red');

这对我很有用：

<script type="text/javascript">
var els = document.getElementsByClassName('input-validation-error');

for(var x=0; x<els.length; x++){
    if( els[x].value == '' ){

        els[x].parentNode.parentNode.style.backgroundColor = '#f00';

    }
}
</script>


var els=document.getElementsByClassName（'input-validation-error'）；
对于（var x=0；x请尝试使用

getElementsByClassName（）
返回一个元素列表，您可以在其中迭代操作

<script type="text/javascript">
var els = document.getElementsByClassName('input-validation-error');

for(var x=0; x<els.length; x++){
    if( els[x].value == '' ){

        els[x].parentNode.parentNode.style.backgroundColor = '#f00';

    }
}
</script>