遍历元素并更改类

Question

这里是一个简单的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更改类，但是很难理解如何遍历元素并找到正确的元素并将类添加到其中。请帮助...

Answer 1

尝试一下：

  $('.columnIdeas').each(function(i, el) {
    $(el).find('img').addClass('classA');
    $(el).find('h2').addClass('classB');
    $(el).find('p').addClass('classC');

    });