Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change order of html tag by using jquery

Tags:

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.

like image 287
Shingo Tada Avatar asked Jan 16 '12 15:01

Shingo Tada


People also ask

What is $() in jQuery?

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action() A $ sign to define/access jQuery. A (selector) to "query (or find)" HTML elements. A jQuery action() to be performed on the element(s)

What is the use of html() method in jQuery?

jQuery html() Method The html() method sets or returns the content (innerHTML) of the selected elements. When this method is used to return content, it returns the content of the FIRST matched element. When this method is used to set content, it overwrites the content of ALL matched elements.

How to replaceWith in jQuery?

The replaceWith() method in jQuery is used to replace the selected elements with the new one. This method replaces the matched elements with the specified HTML elements. It returns the replaced elements. This method is similar to the replaceAll() method.

What is$() in html?

jQuery | html() Method The html() Method in jQuery is used to set or return the innerHTML content of the selected element. Syntax: It returns the content of first matched element. $(selector).html() It sets the content of matched element.


3 Answers

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

like image 102
Didier Ghys Avatar answered Sep 23 '22 01:09

Didier Ghys


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

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

Demo.

like image 22
karim79 Avatar answered Sep 27 '22 01:09

karim79


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

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

like image 42
Rafay Avatar answered Sep 25 '22 01:09

Rafay