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

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

3 个答案: