Question

我正在学习jquery，并且遇到了replaceAll方法。根据我的理解，replaceAll方法使用另一个元素或选择器删除目标选择器。我创建了一个简单的例子，它有几个h4标签，每个标签都有一个不同的类，颜色不同。当你点击按钮时，蓝色类应该替换红色类。它有效，但我得到的蓝色标题比我需要的多。这是jsfiddle

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');

});

Answer 1

replaceAll的工作原理如下：

选择所有.blue个元素（共3个）。

首先查找.red并将其替换为所有3个选定的.blue div。

继续下一个.red并重复它。

您只需选择一个.blue（我选择了第一个:first）：

＆＃13;

$('button').click(function() {

  $('.blue:first').replaceAll('.red');

});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是因为$('.blue')匹配了三个<h4 class="blue">元素。

因此，每个$('.red')将替换为三个<h4 class="blue">。

你想要的是：

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

Answer 3

在您当前的实施中，您选择的所有对象都是基于他们是否具有班级＆＃39;蓝色＆＃39;并将所有具有红色类的对象替换为它们。因此，每个蓝色对象都被替换为基于具有.red类选择的x个对象。

更改您的Jquery按钮，单击如下;

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

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

});

选择带有.blue类的所有对象，然后删除.blue类并添加.red类。

编辑：查看更新后的JSFiddle here

为什么replaceAll方法添加了比实际更多的元素？

3 个答案: