jQuery onClick将此元素移到顶部(作为UL的第一个子元素)

Question

在单击<li><a>....</a></li>除最后一个子元素之外的任何元素时,此元素应作为第一个子元素移动到顶部<ul>.

---

小提琴

---

描述

默认情况下:

<ul>
    <li><a href="#">01</a></li>
    <li><a href="#">02</a></li>
    <li><a href="#">03</a></li>
    <li><a href="#">04</a></li>
    <li><a href="#">05</a></li>
    <li><a href="#">06 (Last Child)</a></li>
</ul>

如果我点击03,这个列表应该如下所示..

<ul>
    <li><a href="#">03</a></li>
    <li><a href="#">01</a></li>
    <li><a href="#">02</a></li>
    <li><a href="#">04</a></li>
    <li><a href="#">05</a></li>
    <li><a href="#">06 (Last Child)</a></li>
</ul>

但是如果单击最后一个孩子,<li>则不应移动或更改此元素...最后一个孩子应始终保持最后一个.

Answer 1

除了使用$('li:not(:last)')元素选择器的最后一个元素之外,您可以为li元素设置click事件.然后使用prependTo作为父亲的第一个孩子追加:

$('li:not(:last)').click(function(){
 $(this).prependTo($(this).parent());
});

工作演示

更新:针对多个UL元素的解决方案

对于多个UL元素,您需要使用:last-child而不是:last.As作为:last目标匹配集中的最后一个元素,而:last-child将针对最后一个子元素的所有li.