Как изменить порядок тега html с помощью jquery

Я хотел бы сделать следующий шаг, используя jquery. Кто-нибудь знает отличное решение?

  • Получить объект DOM элемента "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>

  • Найдите элемент "li", у которого есть элемент "a", равный '2011/12/21'. (Это элемент "row3" li.)

  • Переместите элемент "li" в голову. (также см. ниже код.)

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

Я уже знаю, как получить объект DOM элемента "ul", как это.

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

Но я не знаю, шаги 2 и 3. Поэтому я хотел бы спросить экспертов.

Ответы

Ответ 1

Это выберет элемент a, текст которого "2011/12/21", и переместите родительский li в качестве первого дочернего элемента:

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

Демо

Ответ 2

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

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

Демо.

Ответ 3

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

это выберет нужное значение, переместив его туда, где вы хотите

Ответ 4

Вы можете использовать что-то вроде этого:

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

Это будет использовать селектор, чтобы найти тег <a>, который содержит нужный текст, получить его родительский элемент и затем добавить его к объекту #rows. Preprend означает добавление его в качестве дочернего элемента, но сделайте его первым ребенком.

Здесь вы можете увидеть демо-версию: http://jsfiddle.net/jfriend00/7MRXs/

Ответ 5

Если вы хотите сделать больше сортировки на основе дат, а не только содержимого этого одного элемента, который вы описываете, вы можете использовать плагин сортировки элементов, подобный этому:

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

Он будет работать следующим образом (непроверенный):

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