Cómo cambiar el orden de la etiqueta html usando jquery

Question

Quisiera hacer el siguiente paso usando jquery. ¿Alguien sabe una gran solución?

1. Obtiene el objeto DOM del elemento "ul".

   <ul id="rows"> 
       <li class="row1"> 
        <a class="row1-1" href="/kensaku2/Page1" title="page1"> 
        2011/11/16</a> 
       </li> 
       <li class="row2"> 
        <a class="row1-2" href="/kensaku2/Page2" title="page2"> 
        2011/11/15</a> 
       </li> 
       <li class="row3"> 
        <a class="row1-3" href="/kensaku2/Page3" title="page3"> 
        2011/12/21</a> 
       </li> 
       <li class="row4"> 
        <a class="row1-4" href="/kensaku2/Page4" title="page4"> 
        2011/12/05</a> 
       </li> 
   </ul> 
   

2. Encuentra elemento "li" que tiene contenido "a" del elemento es igual a '2011/12/21'. (Este es el elemento li "row3")

3. Mueva el elemento "li" al cabezal. (Véase también el código de abajo.)

   <ul id="rows"> 
       <li class="row3"> 
        <a class="row1-3" href="/kensaku2/Page3" title="page3"> 
        2011/12/21</a> 
       </li> 
   
       <li class="row1"> 
        <a class="row1-1" href="/kensaku2/Page1" title="page1"> 
        2011/11/16</a> 
       </li> 
       <li class="row2"> 
        <a class="row1-2" href="/kensaku2/Page2" title="page2"> 
        2011/11/15</a> 
       </li> 
       <li class="row4"> 
        <a class="row1-4" href="/kensaku2/Page4" title="page4"> 
        2011/12/05</a> 
       </li> 
   </ul> 
   

ya que sé cómo llegar DOM objeto de elemento "ul" como este.

$("#rows").get(0) 

Pero no sé el paso 2 y 3. Por lo tanto, me gustaría preguntar a los expertos.

Answer 1

Esto seleccionará el elemento a cuyo texto es "2011/12/21" y mover el padre li como primer hijo:

$('#rows a:contains("2011/12/21")').parent().prependTo('#rows'); 

Demo

Answer 2

$("#rows li").filter(function() { 

    // trimming is needed in this case, it seems 
    return $.trim($(this).text()) === "2011/12/21"; 
}).prependTo("#rows"); 

Demo.

Answer 3

$("#rows li a").filter(function(){return $(this).text()=='2011/12/21'}) 

esto va a seleccionar el valor deseado moverla donde quieras

Answer 4

Puede usar algo como esto:

$("#rows li a:contains('2011/12/21')").parent().prependTo("#rows"); 

Esto utilizará un selector para encontrar la etiqueta <a> que contiene el texto deseado, obtener su matriz y luego anteponer a los que #rows objeto. Preprend significa sumarlo como un niño, pero conviértalo en el primer niño.

Se puede ver una obra de demostración aquí: http://jsfiddle.net/jfriend00/7MRXs/

Answer 5

Si quieres hacer algo más de clasificación basado en las fechas y no sólo el contenido de ese elemento único que usted describe, es posible que desee utilizar un elemento de clasificación complemento como éste:

http://james.padolsey.com/javascript/sorting-elements-with-jquery/

que funcionará como esto (no probado):

$('li').sortElements(function(a, b){ 
    var dateA = parseInt($(a).find('a').text().replace('/', ''), 10); 
    var dateB = parseInt($(b).find('a').text().replace('/', ''), 10); 

    return dateA <= dateB ? -1 : 1; // you might want to switch this one 
});