How to change order of html tag by using jquery

Question

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

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>

Find "li" element that has "a" element's content equals '2011/12/21'. (This is "row3" li element.)

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.

Moving: http://stackoverflow.com/questions/1279957/jquery-how-to-move-an-element-into-another-element — Aram Kocharyan, Jan 16 '12 at 15:57
For finding an element containing a value: http://api.jquery.com/contains-selector/ — Aram Kocharyan, Jan 16 '12 at 15:59

score 6 · Accepted Answer · answered Jan 16 '12 at 16:00

6

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

answered Jan 16 '12 at 16:00

Didier Ghys

30,396
9
75
81

Nice answer using the `:contains` pseudo-selector. I believe it's more performative than `.filter()`. – Erick Petrucelli Jan 16 '12 at 16:05
Agreed, and this will probably solve the problem nicely. However, it should be pointed out that this will not do if an *exact* match is what OP is after. – karim79 Jan 16 '12 at 16:06
Indeed, `2011/12/21 BC` would also be catched, although looking at the sample markup, it seems it sticks to YYYY/MM/DD. – Didier Ghys Jan 16 '12 at 16:15
It's really unbelievable !! It worked. Thanks so much! I'm a beginner of jquery. Please give me another solution if you have. I'd like to learn more. – Shingo Tada Jan 16 '12 at 16:15

score 3 · Answer 2 · answered Jan 16 '12 at 15:57

3

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

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

Demo.

answered Jan 16 '12 at 15:57

karim79

339,989
67
413
406

@Adam Rackis - No need, since `.text()` will only extract the plain text, ignoring the markup, so it doesn't really matter in this instance. – karim79 Jan 16 '12 at 16:01
No kidding - I didn't know that ... makes sense. – Adam Rackis Jan 16 '12 at 16:04

score 2 · Answer 3 · answered Jan 16 '12 at 15:59

2

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

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

answered Jan 16 '12 at 15:59

Rafay

30,950
5
68
101

jfriend00 · Answer 4 · 2012-01-16T16:29:21.943

1

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/

edited Jan 16 '12 at 16:29

answered Jan 16 '12 at 16:02

jfriend00

683,504
96
985
979

score 1 · Answer 5 · answered Jan 16 '12 at 16:14

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
});

How to change order of html tag by using jquery

5 Answers5