jQuery: Agregar elemento después del enésimo elemento

Necesito ayuda para agregar un elemento en una ubicación particular en el cuerpo de la página.jQuery: Agregar elemento después del enésimo elemento

Aquí está el código de mi página.

<div id="div1> 
    <label id="label1"></label> 
    <input type="text1"></input> 
    <!-- Insert button here --> 
    <span id="span1"></span> 
</div>

Quiero agregar un botón en el lugar donde he puesto un comentario arriba usando jQuery. Si la sintaxis de la página es fija, ¿hay alguna forma de que pueda agregar un elemento como tercer hijo del div principal? No quiero poner marcadores de posición y reemplazar cadenas.

Gracias.

Fuente

2012-06-25 Sreejith K.

'type =" text1 "' ¿no debería ser 'type =" text "name =" text1 "'? –

Sé que dijiste * que la sintaxis de la página está arreglada *, pero soy un firme defensor de la programación defensiva. Entonces, debería preguntarse, si se agrega un nuevo elemento a '# div1', ¿cómo afectará esto? Bueno, si se agrega antes de la entrada, tendrá que ajustar su código para insertar ahora el botón como el * cuarto niño. ¿Es más seguro suponer que el botón siempre irá justo después del elemento 'input'? Si es así, evitaría agregar después de un cierto índice. – lbstr

$('#div1').children(':eq(1)').after('<button/>');

jsFiddle example.

Fuente

2012-06-25 19:32:05 j08691

button.insertAfter($('#div1').children().eq(1));

Esto insertará el button después de que el segundo hijo de # div1

Fuente

2012-06-25 19:30:50 jackwanders

function insertAfterNthChild($parent, index, content){ 
    $(content).insertAfter($parent.children().eq(index)); 
} 

// Usage: 
insertAfterNthChild($('#div1'), 1, '<button>Click me!</button');

Fuente

2012-06-25 19:31:18 lbstr

jQuery ha creado un selector nth-child() solo para este propósito.

$("input:nth-child(1)").after("<your html here>");

Fuente

2012-06-25 19:32:35

': nth-child' es de la especificación css3 y está indexado no 0. –

Esto se puede conseguir de muchas maneras .. abajo es uno,

//     v--- Change n to insert at different position 
$('#div1 :nth-child(2)').after('<button>Test</button>');

DEMO:http://jsfiddle.net/m5Gyz/

Fuente

2012-06-25 19:32:58

uso: http://api.jquery.com/nth-child-selector/

$("input:nth-child(1)").after('<input type="button" value="button"/>');

demo aquí: http://jsfiddle.net/epinapala/JB4fr/1/

Fuente

2012-06-25 19:33:45

Esto no responde a la parte de _es hay una manera en que puedo agregar un elemento como un tercer hijo del padre div_ – j08691

lo siento, se perdió la punto, editado ahora –

jQuery: Agregar elemento después del enésimo elemento

Respuesta

Cuestiones relacionadas