CODEWITHSUNDEEP
jquery
Shingo Tada
Shingo Tada

Reputation: 571

How to change order of html tag by using jquery

I'd like to do bellow step by using jquery. Does anyone know great solution?

  1. Get DOM object of "ul" element.

    <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. Find "li" element that has "a" element's content equals '2011/12/21'. (This is "row3" li element.)

  3. Move the "li" element to the head. (also see bellow code.)

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

I already know how to get DOM object of "ul" element like this.

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

But I don't know step 2 and 3. So, I'd like to ask experts.

Upvotes: 12

Views: 3208

Answers (5)

jfriend00
jfriend00

Reputation: 707218

You can use something like this:

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

This will use a selector to find the <a> tag that contains the desired text, get its parent and then prepend that to the #rows object. Preprend means to append it as a child, but make it the first child.

You can see a demo work here: http://jsfiddle.net/jfriend00/7MRXs/

Upvotes: 1

timing
timing

Reputation: 6455

If you want to do more sorting based on the dates and not only the content of that single element you describe, you might want to use an element sorting plugin like this one:

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

It will work like this (untested):

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

Upvotes: 1

Didier Ghys
Didier Ghys

Reputation: 30666

This will select the a element whose text is "2011/12/21" and move the parent li as first child:

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

Demo

Upvotes: 6

Rafay
Rafay

Reputation: 31033

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

this will select the desired value move it where ever you want

Upvotes: 2

karim79
karim79

Reputation: 342635

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

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

Demo.

Upvotes: 3

Related Questions