遍歷元素並更改類

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 更改 class 但很難理解如何遍歷元素並找到正確的元素並將 class 添加到其中。 請幫忙...

Answer 1

如何遍歷元素並找到正確的元素並將 class 添加到其中

假設你不想只是做

$(".columnIdeas>img").addClass("classA");
$(".columnIdeas>h2").addClass("classB");
$(".columnIdeas>p").addClass("classC");

這不需要任何循環或“查找”，您可以使用.each和.find “自動”添加類：

 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>

如果您使用 class1/class2 等，則可以將classList替換為"class" + (ii+1) 。

Answer 2

試試這個：

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