為類的每個實例將類添加到父div

Question

我有一個稱為容器的包裝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 ，在每個人的classchange選擇文本，並使用該文本在.mix上調用addClass ：

 $('.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)返回ua NodeList 。

然后，您可以將其轉換為數組數據結構，並對其應用map或forEach操作，在其中您可以使用每個classChange節點及其父節點。

這是我在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中。