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

尝试一下：

遍历元素并更改类

2 个答案: