爲什麼replaceAll方法添加的元素比我實際上多？

我正在學習jquery，並且遇到了replaceAll方法。根據我的理解，replaceAll方法用另一個元素或選擇器去除一個目標選擇器。我創建了一個簡單的示例，其中包含多個h4標籤，並且每個標籤都具有不同顏色的不同類。當你點擊按鈕時，藍色班級應該取代紅色班級。它的工作原理，但我得到更多的藍色標題比我需要。下面是jsfiddle 爲什麼replaceAll方法添加的元素比我實際上多？

HTML

<button>replaceAll</button> 

<div id="ex1"><h2>Example 1</h2><p></p> 
<h4 class="red">This is a header</h4> 
<h4 class="blue">This is a header</h4> 
<h4 class="green">This is a header</h4> 
<h4 class="blue">This is a header</h4> 
<h4 class="green">This is a header</h4> 
<h4 class="red">This is a header</h4> 
<h4 class="red">This is a header</h4> 
<h4 class="red">This is a header</h4> 
<h4 class="red">This is a header</h4> 
<h4 class="blue">This is a header</h4> 
<h4 class="green">This is a header</h4> 
</div>

CSS

.red{color:red;} 
.blue{color:blue;} 
.green{color:green;}

JQuery的

$('button').click(function(){ 

$('.blue').replaceAll('.red'); 

});

來源

2016-06-09 black_yurizan

你讀來DOCO（http://api.jquery.com/replaceall/）？該方法將「用每組匹配元素替換每個目標元素」。在你的情況*匹配元素的集合*包括*三個*藍色項目... – nnnnnn

請參閱我對類操作的回答，從你所說的是你想要實現的。其他答案和你自己的實現是對象操作的對象。 – JokerDan

的replaceAll的工作原理如下：

選擇所有.blue元素（共3個）。

找到第一個.red並將其替換爲全部3個選定的.blue個div。

繼續下一個.red並重復它。

你只需要一個.blue選擇（我選擇與:first第一個）：

$('button').click(function() { 
 

 
    $('.blue:first').replaceAll('.red'); 
 

 
});

.red { 
 
    color: red; 
 
} 
 
.blue { 
 
    color: blue; 
 
} 
 
.green { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>replaceAll</button> 
 

 
<div id="ex1"> 
 
    <h2>Example 1</h2> 
 
    <p></p> 
 
    <h4 class="red">This is a header</h4> 
 
    <h4 class="blue">This is a header</h4> 
 
    <h4 class="green">This is a header</h4> 
 
    <h4 class="blue">This is a header</h4> 
 
    <h4 class="green">This is a header</h4> 
 
    <h4 class="red">This is a header</h4> 
 
    <h4 class="red">This is a header</h4> 
 
    <h4 class="red">This is a header</h4> 
 
    <h4 class="red">This is a header</h4> 
 
    <h4 class="blue">This is a header</h4> 
 
    <h4 class="green">This is a header</h4> 
 
</div>

來源

2016-06-09 12:42:34 Justinas

OP只想替換對象的類，而不是對象本身，因此這是一個不好的方法。例如，如果紅色標題包含文本「hello world」，藍色標題包含「world hello」...... innerHTML內容也將被替換。 – JokerDan

@JokerDan你在哪裏閱讀？ OP表示，他發現'replaceAll'並理解，它將用其他元素（包括內容）取代自己。 – Justinas

這裏我會引用OP爲你： >「當你點擊按鈕時，藍色班級應該取代紅色班級，它可以工作，但我得到的藍色標題比我需要的多，這裏是jsfiddle」 - - 你的解決方案實際上完全消除了頭部。看到我的答案。 – JokerDan

這是因爲$('.blue')與3個<h4 class="blue">元素。

因此，每個$('.red')將被替換爲三個<h4 class="blue">。

你想要的是：

$('<h4 class="blue">This is a header</h4>').replaceAll('.red');

來源

2016-06-09 12:41:34

編輯'.red'的HTML結構也需要調整JS代碼。不是最好的辦法。 – Justinas

在你的你選擇基於所有對象當前實現，如果他們有類「藍色「，並將其替換爲所有具有紅色類別的對象。因此，每個藍色對象被替換爲基於具有.red類選定的x個對象。

更改你的jquery按鈕點擊如下;

$('button').click(function(){ 

    $('.blue').removeClass('blue').addClass('red'); 

});

這樣就選擇了所有帶有.blue類的對象，然後刪除.blue類並添加.red類。

編輯：看到更新後的JSFiddle here

來源

2016-06-09 12:46:38 JokerDan

爲什麼replaceAll方法添加的元素比我實際上多？

回答

相關問題