Come cambiare l'ordine del tag html usando jquery

Question

Vorrei fare il secondo passo usando jquery. Qualcuno sa un'ottima soluzione?

1. Ottenere DOM oggetto di 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. Trova elemento "li", che ha un contenuto "un" elemento di uguale '2011/12/21'. (Questo è l'elemento "row3" li.)

3. Sposta l'elemento "li" in testa. (Vedi anche il codice qui sotto.)

   <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> 
   

so già come ottenere DOM oggetto di elemento "ul" come questo.

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

Ma non so il punto 2 e 3. Quindi, mi piacerebbe chiedere ad esperti.

Answer 1

Questo selezionerà l'elemento a il cui testo è "2011/12/21" e spostare il genitore li come primo figlio:

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

questo selezionerà il valore desiderato spostarlo dove vuoi

Answer 4

Si può usare qualcosa di simile:

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

Questo userà un selettore per trovare il tag <a> che contiene il testo desiderato, ottenere il suo genitore e poi anteporre che alle #rows oggetto. Preprend significa appenderlo come un bambino, ma farlo diventare il primo figlio.

Potete vedere un'opera demo qui: http://jsfiddle.net/jfriend00/7MRXs/

Answer 5

Se si vuole fare di più l'ordinamento in base alle date e non solo il contenuto di quel singolo elemento si descrive, si potrebbe desiderare di utilizzare un elemento di smistamento plugin come questo:

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

che funzionerà come questo (non testata):

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