Cách thay đổi thứ tự thẻ html bằng cách sử dụng jquery

Question

Tôi muốn thực hiện các bước dưới đây bằng cách sử dụng jquery. Có ai biết giải pháp tuyệt vời không?

1. Nhận đối tượng DOM của phần tử "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. Tìm phần tử "li" có nội dung của phần tử "a" bằng '2011/12/21'. (Đây là phần tử li "row3".)

3. Di chuyển phần tử "li" vào đầu. (Cũng xem mã dưới đây.)

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

Tôi đã biết làm thế nào để có được DOM đối tượng của yếu tố "ul" như thế này.

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

Nhưng tôi không biết bước 2 và 3. Vì vậy, tôi muốn hỏi chuyên gia.

Answer 1

này sẽ chọn phần tử a có văn bản là "2011/12/21" và di chuyển cha mẹ li là đứa con đầu tiên:

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

này sẽ chọn giá trị mong muốn di chuyển nó cứ nơi nào bạn muốn

Answer 4

Bạn có thể sử dụng một cái gì đó như thế này:

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

này sẽ sử dụng một selector để tìm thẻ <a> có chứa nội dung mong muốn, có được mẹ của nó và sau đó thêm vào trước đó để phản đối cáC#rows. Preprend có nghĩa là để thêm nó như một đứa trẻ, nhưng làm cho nó là đứa trẻ đầu tiên.

Bạn có thể thấy một tác phẩm giới thiệu ở đây: http://jsfiddle.net/jfriend00/7MRXs/

Answer 5

Nếu bạn muốn làm nhiều hơn nữa sắp xếp dựa trên số ngày và không chỉ là nội dung trong đó yếu tố duy nhất mà bạn mô tả, bạn có thể muốn sử dụng một yếu tố sắp xếp plugin như cái này:

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

Nó sẽ làm việc như thế này (chưa được kiểm tra):

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