jquery - 如何使用 jQuery replaceWith 替换不同数量的元素

Question

我有不同数量的具有相同类名的元素：

<p class="test"></p>
<p class="test"></p>

我想用一组具有相同类名的新元素替换其中的每一个，但可能会有更多或更少的元素：

<p class="test"></p>

或者

<p class="test"></p>
<p class="test"></p>
<p class="test"></p>

如果我使用$('p.test').replaceWith('new content')，它将用内容替换每个元素，所以我不能这样做。

实现这一目标的最佳方法是什么？

编辑（另一种解释）：

所以我在页面上有这些元素：

<p class="test"></p>
<p class="test"></p>
<p class="test"></p>

然后，我动态检索一组具有相同类名（可能还有其他一些类名）的新元素（数量不等）。例如：

<p class="test classa"></p>
<p class="test classb"></p>

在上面的示例中，我希望前三个<p>元素消失。取而代之的是 2 个动态检索的<p>元素。

请记住，任一集合的元素数量可能会有所不同。

Answer 1

$('p.test') 是一个数组，你可以在其中循环

Answer 2

更新：

假设你有你<p>'s的容器

<div id="container">
    <p class="test"></p>
    <p class="test"></p>
    <p class="test"></p>
    <p class="test"></p>
</div>

您可以删除它们，并附加（或预先添加）新元素

$('p.test').remove(); //Will remove all <p>'s with class test

我假设您的新元素集在数据数组中

var data= { 
  '1': '<p class="newclass">Hello</p>', 
  '2': '<p class="newclass2">Hello2</p>' 
  '3': '<p class="newclass3">Hello3</p>' 
  }; //Could have 100 rows, it wouldn't matter

$.each(data, function(i,val){   
        //Do some stuff
        $('#container').append(val);
  });  

Answer 3

我会有一个环境<div>，每次都用你的新元素集替换那个 div。所以：

<div id="surround">
  <p class="test"></p>
  <p class="test"></p>
  <p class="test"></p>
</div>

然后是 jQuery：

$("#surround").replaceWith('new content');