选择元素并使其成为第一个元素答案

【问题标题】：select element and make it first element选择元素并使其成为第一个元素
【发布时间】：2017-03-16 04:50:45
【问题描述】：

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

当我点击三个时，我希望它是这样的：-

<ul>
    <li>Three</li>
    <li>One</li>
    <li>Two</li>
    <li>Four</li>
</ul>

【问题讨论】：

删除并添加...
请添加一些您目前尝试过的代码，我们会帮助您调试。

标签： javascript jquery html css jquery-ui

【解决方案1】：

如果你有 jQuery，你可以使用：

$('#items li').click(function() {
  $(this).parent().prepend(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id = "items">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

如果需要，我也可以编写一个非 jQuery 的。

【讨论】：

【解决方案2】：

使用remove() 和prepend() 方法处理点击事件。

$("body").on("click",'li',function(){
$('ul').prepend($(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>

</ul>

【讨论】：

为什么需要循环，为什么需要删除？
你也不需要 - 你可以直接追加/前置一个 DOM 对象而不必担心它被克隆并且循环完全是多余的

【解决方案3】：

你可以试试这个

        $('#list li').on('click', function () {
            var index = $('li').index(this);
            if (index !== 0) {
                $(this).prependTo($(this).parent());
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul id="list" style="cursor: pointer;">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
    </div>
    </form>
</body>
</html>

【讨论】：