el selector eq no funciona

Se seleccionan dos elementos h3 con el siguiente selector:

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

Necesito reemplazar esos elementos de la siguiente manera:

$('#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>');      

El problema que tengo es que ambos elementos (eq(0) Y eq(1)) se reemplazan con "Las 5 mejores fotos", y no puedo entender por qué y cómo solucionarlo.

Apreciaré mucho cualquier ayuda para solucionar este problema.

preguntado el 03 de mayo de 12 a las 16:05

Sin ver su marcado, sería adivinar, pero parece que solo tendría 1 h3 por #content div div ul. -

Pegue su marcado HTML por favor. -

Tenga en cuenta que una vez que haya reemplazado :eq(0) con un <div/>, el segundo selector no incluirá eso h3 en la lista de elementos (ya que ahora es un <div />). -

Pregunta inútil sin HTML. -

@MHZ no importa si puede cambiar el HTML; necesitamos ver la salida para que podamos ayudar a arreglar sus selectores. -

3 Respuestas

prueba esto:

$('#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>');    

Esta respuesta parece arriesgada, pero creo que es correcta, porque, cuando reemplaza por primera vez el h3 con div entonces el segundo h3 se convierte en first es decir, eq(0). Entonces nunca puedes obtener un h3 con índice 2, es decir eq(2).

DEMO

También puede intentar lo siguiente:

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

DEMO

contestado el 03 de mayo de 12 a las 16:05

no, eso no funciona porque estamos reemplazando el mismo elemento dos veces. Aunque agradezco la respuesta. - AnchoaLeyenda

@MHZ Vea la DEMO y luego decida. - laparadoja del código

Te estas perdiendo el li

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

Ejemplo


O recuerda que solo reemplazas una etiqueta h3:

$('#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>'); ​

Ejemplo

contestado el 03 de mayo de 12 a las 16:05

No, necesito reemplazar ambos porque estoy agregando diferentes estilos a ambos, solo simplifiqué el div para mi publicación, para que sea más fácil. - AnchoaLeyenda

#content div div ul h3 es el selector correcto, no necesito que se le agregue el li. - AnchoaLeyenda

Ah, ¿probaste el segundo ejemplo que publiqué? Debería funcionar sin agregar el LI - Joe

prueba esto;

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

también verifique la cantidad;

console.log($('#content div div ul h3').size());

contestado el 03 de mayo de 12 a las 16:05

El programa de .size() método es funcionalmente equivalente al .length propiedad; sin embargo, el .length Se prefiere la propiedad porque no tiene la sobrecarga de una llamada de función. - iambriansreed

size() no es pesado y cruzado navegador. es por eso que no prefiero usar ,length para colecciones dom, solo para cadenas, arreglos, etc. - eyurdakul

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.