How to replace multiple selectors at a time using replaceWith()

Question

I want to replace certain divs with other divs. But I want to do it all at a time.

divs_to_replace.eq(-1).after(new_divs).end().remove();

So I thought I should use replaceWith() instead as it does that at once:

divs_to_replace.replaceWith(new_divs);

However this replaces the old divs with the new ones one by one. So I have as many old divs there are times duplicated new divs. Is there a way I can do this all at once?

EDIT:

http://jsfiddle.net/9ej2n/ (Working solution)

http://jsfiddle.net/9ej2n/1/ (Desired solution)

EDIT2: (..content..)

<div class="article">
    (..content..)
</div>

<div class="article">
    (..content..)
</div>

<div class="article">
    (..content..)
</div>

<div class="empty_article"></div>
<div class="empty_article"></div>
<div class="empty_article"></div>
<div class="empty_article"></div>

Now I load new articles with content via AJAX into the page and replace the empty_articles with this new ones.

I tried to make the example simple to go to the point. Anyway this is more real example. I thought it would be better for performance to use replaceWith() instead of the before approach.

What's wrong with your current working solution? http://jsfiddle.net/9ej2n/ — Blue Skies, Dec 07 '13 at 14:02
The first one works, but I thought it would be more efficient to call 1 function instead of 4. — Alvaro, Dec 07 '13 at 14:04
No, don't worry about efficiency at this level. Even if you find a way with fewer function calls, most likely there are more calls happening under the hood. If you're using jQuery, then such micro-optimizations are pretty much meaningless. — Blue Skies, Dec 07 '13 at 14:05
Thanks,but anyone it looks cleaner. http://jsfiddle.net/9ej2n/1/ — Alvaro, Dec 07 '13 at 14:06
not clear what objective is.... remove all the `div` and replace collection with new content? If so what does parent structure look like? Demos are far too primitive — charlietfl, Dec 07 '13 at 14:11
Since you have a working solution, I really think you should post this on http://codereview.stackexchange.com — Blue Skies, Dec 07 '13 at 14:19
*"I thought it would be better for performance to use replaceWith()..."* Now you're talking about performance again. First, don't assume something will perform poorly. Test it. Second, whatever performance difference there is (better or worse), it's not going to make a difference anyway since the overhead of using jQuery absorbs any of these tiny differences. — Blue Skies, Dec 07 '13 at 14:22
Ok, I guess I made a real bad question. Anyway the doubt was how to replace several elements at the same time (althought it might be unuseful in my case). — Alvaro, Dec 07 '13 at 14:26
@Alvaro: It just really depends on what the ultimate issue is. I don't see that there's any real issue here, but if there is an actual problem, you should describe it clearly. — Blue Skies, Dec 07 '13 at 14:29

score 0 · Accepted Answer · answered Dec 07 '13 at 14:22

0

If you are insisting on using replaceWith, then you may wrap them first:

divs_to_replace.wrapAll("<div/>").parent().replaceWith(new_divs);

Fiddle: http://jsfiddle.net/9ej2n/3/

Wrap them and then replace the parent.

answered Dec 07 '13 at 14:22

Abhitalks

27,721
5
58
81

How to replace multiple selectors at a time using replaceWith()

1 Answers1