Question

I have a varying number of elements with the same class name:

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

I want to replace each of these with a new set of elements with the same class name, but there could be more or fewer elements:

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

or

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

If I use $('p.test').replaceWith('new content'), it will replace each element with the content so I can’t do that.

What is the best way to accomplish this?

EDIT (another explanation):

So I have these elements on the page:

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

Then, I dynamically retrieve a new set of elements (a varying number of them) that have the same class name (and maybe some other class names). For example:

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

In the above example, I want the first three <p> elements to be gone. And in their place should be the 2 dynamically retreived <p> elements.

Keep in mind the number of elements of either set can vary.

Answer 1

Updated:

assuming you have your <p>'s into a container

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

You could delete them, and append (or prepend) the new elements

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

I assume your new set of elements are into the data array

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