我试图在单击按钮时重新排列我的列表，第一个移动最后，第二个移动第四，第三个保持第三个和第五个移动，它似乎没有任何效果，即使控制台没有显示任何内容.
$(document).ready(function() {
$("#rearranage").click(function() {
$.fn.orderChildren = function(order) {
this.each(function() {
var el = $(this);
for (var i = order.length; i >= 0; i--) {
el.prepend(el.children(order[i]));
}
});
return this;
};
$(".lists").orderChildren([
"#fifth",
"#fourth",
"#third",
"#second",
"first"
]);
});
});<div class="hyperlinks">
<ol class="lists">
<li><a id="first" href="http://www.google.com">this</a></li>
<li><a id="second" href="http://www.google.com">is</a></li>
<li><a id="third" href="http://www.google.com">a</a></li>
<li><a id="fourth" href="http://www.google.com">test</a></li>
<li><a id="fifth" href="http://www.google.com">!</a></li>
</div>
</ol>
<button class="button" id="rearrange">rearrange this!</button>我为你做了一个小提琴：https : //jsfiddle.net/6qoq3zrv/
HTML：
<div class="hyperlinks">
<ol class="lists">
<li class="block-item"><a id="first" href="http://www.google.com">this</a></li>
<li class="block-item"><a id="second" href="http://www.google.com">is</a></li>
<li class="block-item"><a id="third" href="http://www.google.com">a</a></li>
<li class="block-item"><a id="fourth" href="http://www.google.com">test</a></li>
<li class="block-item"><a id="fifth" href="http://www.google.com">!</a></li>
</ol>
</div>
<input type="submit" id="rearrange">
JS：
$(document).ready(function(){
$("#rearrange").click(function(){
$($(".block-item").get().reverse()).each(function() {
$(this).appendTo($(this).parent());
});
});
});
rearrange单击按钮时，您的超链接现在将反转。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句