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.
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)
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.
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.
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.
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
$("#rows li").filter(function() {
// trimming is needed in this case, it seems
return $.trim($(this).text()) === "2011/12/21";
}).prependTo("#rows");
Demo.
$("#rows li a").filter(function(){return $(this).text()=='2011/12/21'})
this will select the desired value move it where ever you want
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With