Question

我有一个名为container的包装div，在该容器div中，我有一个名为mix的div的多个实例。每个mix中都有一个名为changeclass的类，它带有文本值。我需要将每个changeclass div的文本值添加到其父混合div作为类。

这是我的HTML。

<div class="mix">
  <div class="classchange">
    <p>active</p>
    <div class="text"></div>
  </div>
</div>
  <div class="mix">
  <div class="classchange">
    <p>active2</p>
    <div class="text"></div>
  </div>
</div>
  <div class="mix">
  <div class="classchange">
    <p>active3</p>

  </div>
</div>
  <div class="mix">
  <div class="classchange">
    <p>active4</p>
    <div class="text"></div>
  </div>
</div>

到目前为止，在我的研究中，我已经能够将一个类的父div添加到该类中，但不能将其添加到每个实例中。

我一直在使用

var str = $( ".classchange" ).text();
$( ".classchange" ).parent().addClass( str );

但是我不确定如何向其中添加.each函数以使其正常工作。

Answer 1

迭代.each中的.mix，在每个classchange中选择文本，然后使用该文本调用addClass上的.mix：

$('.mix').each(function() {
  $(this).addClass(
    $(this).find('p').text()
  );
});

console.log(document.body.innerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mix">
  <div class="classchange">
    <p>active</p>
    <div class="text"></div>
  </div>
</div>
<div class="mix">
  <div class="classchange">
    <p>active2</p>
    <div class="text"></div>
  </div>
</div>
<div class="mix">
  <div class="classchange">
    <p>active3</p>

  </div>
</div>
<div class="mix">
  <div class="classchange">
    <p>active4</p>
    <div class="text"></div>
  </div>
</div>

Answer 2

好吧，由于您所有的classchange都在mix内，因此您可以document.querySelectorAll(path)返回NodeList。

然后，您可以将其转换为数组数据结构，并对它们应用map或forEach操作，在那里您可以处理每个classChange节点及其父节点。 / p>

这是我在ES6中要做的事情，不确定JQuery，但是如果有帮助，我将在此保留。

Answer 3

因此，您要向每个.mix元素添加新类吗？

如果是这样，那么我们可以在每个.classchange元素上进行迭代并从那里添加新的类。像这样：

$('.classchange').each(function() {
  $(this).parent('.mix').addClass($(this).text());
});

Answer 4

要更好地控制每个匹配元素的行为，请使用$.each()函数遍历目标元素并分别控制每个父元素.mix的DOM操作：

// Loop through all .classchange div
$('.classchange').each(function() {
  // Select closest .mix div add add new class based on current target text
  $(this).closest('.mix').addClass($(this).text());
});

.active {
  color: red;
}

.active2 {
  color: hotpink;
}

.active3 {
  color: purple;
}

.active4 {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mix">
  <div class="classchange">
    <p>active</p>
    <div class="text"></div>
  </div>
</div>
<div class="mix">
  <div class="classchange">
    <p>active2</p>
    <div class="text"></div>
  </div>
</div>
<div class="mix">
  <div class="classchange">
    <p>active3</p>

  </div>
</div>
<div class="mix">
  <div class="classchange">
    <p>active4</p>
    <div class="text"></div>
  </div>
</div>

您的代码基本上是将所有4个活动类添加到所有.mix div中。

为类的每个实例将类添加到父div

4 个答案: