Question

<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>

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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>

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

3 个答案: