Question

Two h3 elements are selected with the following selector:

$("#content div div ul h3").css("border","1px solid red");

I need to replace those elements as follows:

$('#content div div ul h3:eq(0)').replaceWith('<div>Top 5 Photos </div>');      
$('#content div div ul h3:eq(1)').replaceWith('<div>Recent Photos</div>');      

The problem I am having is that both elements ( eq(0) AND eq(1) ) are getting replaced with “Top 5 Photos”, and I cannot figure out why and how to fix this.

I will greatly appreciate any help with fixing this problem.

Answer 1

try this:

$('#content div div ul h3:eq(0)').replaceWith('<div>Top 5 Photos </div>');      
$('#content div div ul h3:eq(0)').replaceWith('<div>Recent Photos</div>');    

This answer seems to hazard, but it is right I think, because, when you first replace the h3 with div then the second h3 becomes first i.e eq(0). So you can’t never get a h3 with index 2 i.e eq(2).

DEMO

You can also try this:

var replaces = ['<div>FIRET</div>', '<div>SECOND</div>'];
$('#content div div ul h3').each(function(index, val) {
    $(this).replaceWith(replaces[index]);
});

DEMO