Question

我有两个盒子，左右两边。右侧框包含项目列表，左侧在开头时为空白。

我想按特定顺序从右到左添加项目，即使我在列表项上随机点击。

点击每个列表项后，我不想在左框中每次都重新排列所有项目。

目前，如果我在列表项上随机点击，我会得到以下输出：

enter image description here

但我想要关注输出：

enter image description here

以下是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My Example</title>       
        <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
        <style>         
            .container { width: 900px;margin: 0 auto; }
            .container ul li { border: 1px solid #000;border-radius: 5px;list-style: none outside none;margin-bottom: 10px;margin-right: 30px;padding: 5px; }
            .container ul li:hover { background-color: #F2FFF2;cursor: pointer; }
            div.left { border:1px solid #000;border-radius: 5px;width: 350px;margin-right:15px;float:left;min-height:250px; }
            div.right { border:1px solid #000;border-radius: 5px;width: 350px;margin-right:15px;float:left;min-height:250px; }
        </style>
    </head>
<body>
    <div class="container">
        <div class="left">
            <ul></ul>
        </div>
        <div class="right">
            <ul>
                <li data-order="1" >Item 1</li>
                <li data-order="2" >Item 2</li>
                <li data-order="3" >Item 3</li>
                <li data-order="4" >Item 4</li>
                <li data-order="5" >Item 5</li>
                <li data-order="6" >Item 6</li>
                <li data-order="7" >Item 7</li>
                <li data-order="8" >Item 8</li>
                <li data-order="9" >Item 9</li>
                <li data-order="10" >Item 10</li>
            </ul>
        </div>
        <div style="clear:both;"></div>
    </div>

    <script type="text/javascript">
        jQuery(document).ready(function() { 
            jQuery("div.right").delegate("ul li", "click", function() {             
                jQuery("div.left ul").append(jQuery(this));
            });         
        });
    </script>

</body>
</html>

Answer 1

在追加之前，您可以比较当前data-order的{{1}}并查找编号最大的前一个li，然后在此之后追加。试试这个：

li

Example fiddle

Answer 2

您可以编写sort函数，并在每次添加li后调用它。见下面的jquery

jQuery(document).ready(function() { 
    jQuery("div.right").delegate("ul li", "click", function() {             
             jQuery("div.left ul").append(jQuery(this));

             // call sort function and get sorted list
             var sortedLis =  jQuery("div.left ul").find(" li").sort(
               function(a,b){
                 var first  = $(a).data('order');
                var second  = $(b).data('order');
               return parseInt(first) - parseInt(second);
              });
             // empty the current list and add sorted list
            jQuery("div.left ul").empty().append(sortedLis);
     });
});

<强> Demo

Answer 3

$(document).ready(function () {
  $("div.right").delegate("ul li", "click", function () {
    var orderedList = $(".left ul").append(this)
       .find("li").sort(function (a, b) {
           return $(a).data("order") - $(b).data("order");
    });
    $(".left ul").html(orderedList)
  });
});

Demo

Answer 4

你必须以某种方式对这些元素进行排序。我已经写了相同的片段。它对我来说很好。

<script type="text/javascript">
    jQuery(document).ready(function() { 
        jQuery("div.right").delegate("ul li", "click", function() {   
            var currItemDataOrder = parseInt(jQuery(this)[0].getAttribute("data-order"));
            var leftListLength = jQuery("div.left ul li").length;

            if(leftListLength == 0){
                jQuery("div.left ul").append(jQuery(this));
                return;
            }

            for(var i=0;i<leftListLength;i++){
                var dataOrder = parseInt(jQuery("div.left ul li")[i].getAttribute("data-order"));

                if(currItemDataOrder < dataOrder){
                    jQuery(this).insertBefore(jQuery("div.left ul li")[i]);
                    return;
                }

            }

            jQuery("div.left ul").append(jQuery(this));


        });         
    });
</script>

按特定顺序添加列表项

4 个答案:

Demo