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.

For finding an element containing a value: api.jquery.com/contains-selector — Aram Kocharyan
– Aram Kocharyan, Commented Jan 16, 2012 at 15:59

Didier Ghys · Accepted Answer · 2012-01-16 16:00:07Z

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, 2012 at 16:00

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Erick Petrucelli Over a year ago

Nice answer using the :contains pseudo-selector. I believe it's more performative than .filter().

karim79 Over a year ago

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.

Didier Ghys Over a year ago

Indeed, 2011/12/21 BC would also be catched, although looking at the sample markup, it seems it sticks to YYYY/MM/DD.

Shingo Tada Over a year ago

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.

karim79 · Accepted Answer · 2012-01-16 15:57:56Z

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, 2012 at 15:57

karim79

343k67 gold badges420 silver badges409 bronze badges

2 Comments

karim79 Over a year ago

@Adam Rackis - No need, since .text() will only extract the plain text, ignoring the markup, so it doesn't really matter in this instance.

Adam Rackis Over a year ago

No kidding - I didn't know that ... makes sense.

Rafay · Accepted Answer · 2012-01-16 15:59:32Z

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, 2012 at 15:59

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Comments

timing · Accepted Answer · 2012-01-16 16:14:45Z

1

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

answered Jan 16, 2012 at 16:14

timing

6,4951 gold badge20 silver badges16 bronze badges

Comments

jfriend00 · Accepted Answer · 2012-01-16 16:29:21Z

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, 2012 at 16:29

answered Jan 16, 2012 at 16:02

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Collectives™ on Stack Overflow

How to change order of html tag by using jquery

5 Answers 5

4 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related