这里是一个简单的HTML代码:
<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>
我想像这样使用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').each(function(i, el) {
$(el).find('img').addClass('classA');
$(el).find('h2').addClass('classB');
$(el).find('p').addClass('classC');
});