时间戳

首页 > 解决方案 > 为每个类实例添加类到父 div

javascript - 为每个类实例添加类到父 div

问题描述

我有一个名为 container 的包装器 div，在该容器 div 中我有一个名为 mix 的 div 的多个实例。每个内部都有一个使用文本值mix调用的类。changeclass我需要将每个changeclassdiv 的文本值作为一个类添加到其父混合 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 函数以使其工作。

标签： javascriptjqueryhtml

解决方案

遍历es，选择每个文本中的文本.each并使用该文本调用：.mixclasschangeaddClass.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>

推荐阅读