FIDDLE

描述

默认：

<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());
});

<强> Working Demo

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

如果有多个UL元素，则需要使用:last-child而不是:last。由于:last定位匹配集中的最后一个元素，而:last-child将定位所有li是最后一个孩子。

Answer 2

您可以使用:not(:last)过滤器和jQuery prependTo：

$('li a:not(:last)').click(function() {

    $li = $(this).parent('li');

    $li.prependTo($li.parent('ul'));

    return false;
})

Answer 3

检查此更新的JSFiddle

这符合建议。只需将jquery添加到您的代码

即可

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

FIDDLE

3 个答案: