2011-02-23 12 views
9

Ok, así que tengo esta estructura HTML y tengo que seguir agregando un nuevo li después de test3 y así sucesivamente ... justo antes del formulario li. Sé cómo hacer la lógica de anexar en jquery, pero ¿cómo puedo aislarme y asegurarme de que puedo seguir haciéndolo ... quizás use la función en vivo?Adjuntar a la penúltima li

<td class="resources_present"> 
<ul> 
    <li><a href="http://test.com">http://test.com</a></li> 
    <li><a href="http://test2.com">http://test2.com</a></li> 
    <li><a href="http://tes3.com">http://test3.com</a></li> 
<li><form method="post" id="new_resource" class="new_resource" action="/resources" accept-charset="UTF-8"><div style="margin: 0pt; padding: 0pt; display: inline;"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="BEeMlTtPiMi8mv/whQ2z757CTTOnNl0oiPpN3WdqSBg=" name="authenticity_token"></div> 
    <div class="field"> 
    <input type="text" size="30" name="resource[url]" id="resource_url"> 
    <input type="hidden" value="5" name="resource[course_id]" id="resource_course_id"> 
    </div> 
    <div class="actions"> 
    <input type="submit" value="Create" name="commit" id="resource_submit" style="display: inline;"> 
     <img class="noShow" src="/images/spinner.gif" style="display: none;"> 
    </div> 
</form></li> 
</ul> 
</td> 

Básicamente tengo que encontrar el selector a añadir lo siguiente:

<li><a href="http://test4.com">http://test4.com</a></li> // after the 

      <li><a href="http://test3.com">http://test3.com</a></li> // and continue to do that with 5, 6 , 7, and so on 

Respuesta

14

muchas maneras de hacer esto. Aquí hay uno:

$('li:last').prev(); 

Y para añadir:

$('li:last').prev().after('<li><a href="http://test4.com">http://test4.com</a></li>'); 
+0

Creo que esta voluntad solo funciona si el elemento anterior es un li – Xodarap

+2

En HTML bien formado, el elemento anterior de un li debería ser un li, ¿no? (a menos que la lista solo tenga 1 elemento, que no es el HTML de ejemplo) – AlfaTeK

8

$("#yourselectorid li").eq(-2) debe hacer el truco

EDITAR

Asumiendo que tiene al menos 2 <LI> ya presente (uno de ellos el formulario)

+1

Cool no sabía que es posible usar valores negativos como ése con eq() – TK123

0

Debe usar la función .after() para esto.

Dé su test3 una clase o id para encontrarlo fácilmente así:

<li id="insertafter"><a href="http://test3.com">http://test3.com</a></li> 

A continuación, utilice la siguiente:

$('#insertafter').after('<li><a href="http://test4.com">http://test4.com</a></li>'); 

También hay una función before :)

Cuestiones relacionadas