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?
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.
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");
演示。
$("#rows li a").filter(function(){return $(this).text()=='2011/12/21'})
这将选择所需的值将其移动到您想要的位置
链接地址: http://www.djcxy.com/p/42542.html