下面是一个简单的HTML代码:
null
<div class="rowIdeas">
<div class="columnIdeas">
<img src="icons/philosophy.svg">
<h2>title 1</h2>
<p>some text <span style="color: #9052fa"> goes</span> here </p>
</div>
<div class="columnIdeas">
<img src="icons/english.svg">
<h2>title 1</h2>
<p>some text <span style="color: #9052fa"> goes</span> here </p>
</div>
<div class="columnIdeas">
<img src="icons/math.svg">
<h2>title 1</h2>
<p>some text <span style="color: #9052fa"> goes</span> here </p>
</div>
</div>null
我想使用Javascript或jQuery向元素动态添加3个不同的类，如下所示:
<div class="rowIdeas">
<div class="columnIdeas">
<img class="classA" src="icons/english.svg">
<h2 class="classB">title 1</h2>
<p class="classC">some text <span style="color: #9052fa"> goes</span> here </p>
</div>
<div class="columnIdeas">
<img class="classA" src="icons/english.svg">
<h2 class="classB">title 1</h2>
<p class="classC">some text <span style="color: #9052fa"> goes</span> here </p>
</div>
<div class="columnIdeas">
<img class="classA" src="icons/english.svg">
<h2 class="classB">title 1</h2>
<p class="classC">some text <span style="color: #9052fa"> goes</span> here </p>
</div>
</div>
我们怎样才能做到这一点呢？
我知道如何使用javascript更改类，但很难理解如何循环遍历元素，找到正确的元素并将类添加到其中。 请帮帮我。。。
如何遍历元素并找到正确的元素并将类添加到其中
假设你不想
$(".columnIdeas>img").addClass("classA");
$(".columnIdeas>h2").addClass("classB");
$(".columnIdeas>p").addClass("classC");
这不需要任何循环或“查找”，您可以使用.eace和.find:
null
var classList = ["classA", "classB", "classC"];
$(".columnIdeas").each((i, e) => {
$(e).find(">*").each((ii, ee) =>{
$(ee).addClass(classList[ii]);
});
});.classA {
color: red;
border:1px solid red;
}
.classB {
color: blue;
}
.classC {
color: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rowIdeas">
<div class="columnIdeas">
<img src="icons/philosophy.svg">
<h2>title 1</h2>
<p>some text <span style="color: #9052fa"> goes</span> here </p>
</div>
<div class="columnIdeas">
<img src="icons/english.svg">
<h2>title 1</h2>
<p>some text <span style="color: #9052fa"> goes</span> here </p>
</div>
<div class="columnIdeas">
<img src="icons/math.svg">
<h2>title 1</h2>
<p>some text <span style="color: #9052fa"> goes</span> here </p>
</div>
</div>
请尝试以下操作:
$('.columnIdeas').each(function(i, el) {
$(el).find('img').addClass('classA');
$(el).find('h2').addClass('classB');
$(el).find('p').addClass('classC');
});
