Question

如何使用jquery进行设置，以便点击两个列表中任何一个列表中的项目，将所选项目移动到另一个列表中。

当将项目移动到另一个列表时，新的排序应该首先在数字上基于项目编号（数据值），然后是左项目，然后是正确的项目。

例如，如果您要点击＆＃34;左侧第2项＆＃34;，则应从左侧列表中删除该项目，然后右侧列表应显示右侧项目1，左侧项目2，右侧项目2 ，右项3，右项4，右项5

＆＃13;

<!DOCTYPE html>
<html>
    <body>
        <div class="container">
           <div class="row">
               <div class="col-sm-4 col-sm-offset-1 col-xs-6">
                   <div class="well">
                       <ul class="my-list my-list-left">
                           <li data-value="1">Left Item 1</li>
                           <li data-value="2">Left Item 2</li>
                           <li data-value="3">Left Item 3</li>
                           <li data-value="4">Left Item 4</li>
                           <li data-value="5">Left Item 5</li>
                       </ul>
                   </div>
               </div>
               <div class="col-sm-4 col-sm-offset-1 col-xs-6">
                   <div class="well">
                      <ul class="my-list my-list-right">
                           <li data-value="1">Right Item 1</li>
                           <li data-value="2">Right Item 2</li>
                           <li data-value="3">Right Item 3</li>
                           <li data-value="4">Right Item 4</li>
                           <li data-value="5">Right Item 5</li>
                      </ul> 
                   </div>
               </div>
           </div> 
        </div>
    </body>
</html>

＆＃13;

Answer 1

我会做这样的事情，虽然我会花更多的时间来清理它。

您需要将点击的元素从源列表移动到目标列表，然后根据属性对目标列表进行排序。

以下Javascript都是这两种方式。

var moveToListAndSort = function(source, target, attribute) {
    attribute = attribute || 'data-value';  

    // Whenever a list item is clicked in the source list
    $(source).on('click', 'li', function() {
        // Remove the clicked list item from its current list
        $(this).remove();

        // Append it to the target list
        $(target).append($(this));

        // Sort the target list based on an attribute
        $(target).children('li').detach().sort(function(a, b) {
            var valueA = a.getAttribute(attribute);
            var valueB = b.getAttribute(attribute);

            var sortA = a.getAttribute('data-sort');
            var sortB = b.getAttribute('data-sort');

            // Compare the value attributes of the two list items
            if (valueA > valueB) {
                return 1;
            }

            if (valueA < valueB) {
                return -1;
            }

            // The value attributes are the same, so compare the
            // sort attributes
            if (sortA > sortB) {
                return 1;
            }

            if (sortA < sortB) {
                return -1;  
            }

            return 0;
        }).appendTo(target);
    });
};

moveToListAndSort('.my-list-left', '.my-list-right');
moveToListAndSort('.my-list-right', '.my-list-left');

我必须在每个列表项中添加第二个属性data-sort，以确定在值之后按排序的内容，这是硬编码的。

如果您想通过其他属性执行初始排序，该函数可选择接受第三个参数attribute。

理想情况下，排序将被提取到自己的功能，以便它可以单独运行。

var moveToListAndSort = function(source, target, attribute) { attribute = attribute || 'data-value'; $(source).on('click', 'li', function() { $(this).remove(); $(target).append($(this)); $(target).children('li').detach().sort(function(a, b) { var valueA = a.getAttribute(attribute); var valueB = b.getAttribute(attribute); var sortA = a.getAttribute('data-sort'); var sortB = b.getAttribute('data-sort'); if (valueA > valueB) { return 1; } if (valueA < valueB) { return -1; } if (sortA > sortB) { return 1; } if (sortA < sortB) { return -1; } return 0; }).appendTo(target); }); }; moveToListAndSort('.my-list-left', '.my-list-right'); moveToListAndSort('.my-list-right', '.my-list-left');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <a style="float: right; margin-top: 30px;" href="index.html">« Back to the interview question list</a> </h1> <h4>jQuery DOM manipulation and event handling.</h4> <p>Open up <code>test1.html</code>, and add in some Javascript code to make it so that clicking items from either of the two lists will move the selected item into the other list.</p> <p>When moving items to the other list, the new ordering should be first numerically based on the items number (<code>data-value</code>), and then the left item followed by the right item.</p> <p>For example, if you were to click "left item 2", that item should be removed from the left list, and the right list should then show <code>Right item 1, Left Item 2, Right Item 2, Right Item 3, Right item 4, Right item 5</code></p> <hr /> <div class="row"> <div class="col-sm-4 col-sm-offset-1 col-xs-6"> <div class="well"> <ul class="my-list my-list-left"> <li data-value="1" data-sort="1">Left Item 1</li> <li data-value="2" data-sort="1">Left Item 2</li> <li data-value="3" data-sort="1">Left Item 3</li> <li data-value="4" data-sort="1">Left Item 4</li> <li data-value="5" data-sort="1">Left Item 5</li> </ul> </div> </div> <div class="col-sm-4 col-sm-offset-1 col-xs-6"> <div class="well"> <ul class="my-list my-list-right"> <li data-value="1" data-sort="2">Right Item 1</li> <li data-value="2" data-sort="2">Right Item 2</li> <li data-value="3" data-sort="2">Right Item 3</li> <li data-value="4" data-sort="2">Right Item 4</li> <li data-value="5" data-sort="2">Right Item 5</li> </ul> </div> </div> </div> </div>

Answer 2

这是一个好的开始......

您可以找到如何制作侦听器事件和jQuery选择器。

您还可以添加逻辑来操作html元素并对其进行排序。

＆＃13;

$('ul.my-list-left ').on('click','li',function () {
     var  total =  $('ul.my-list-right li').length;
     if(total ===0){
         $('ul.my-list-right').append($('ul.my-list-left li').eq($(this).index())) 
     }else{
         var data_value = parseInt($(this).attr('data-value'));
         
         var position = total<data_value?total-1:data_value-1;
         $('ul.my-list-right li').eq(position).after($('ul.my-list-left li').eq( $(this).index())) 
     }
 });

 $('ul.my-list-right ').on('click','li',function () {
     var  total =  $('ul.my-list-left li').length;
     if(total ===0){
         $('ul.my-list-left').append($('ul.my-list-right li').eq($(this).index())) 
     }else{
         var data_value = parseInt($(this).attr('data-value'));
         
         var position = total<data_value?total-1:data_value-1;
         $('ul.my-list-left li').eq(position).after($('ul.my-list-right li').eq( $(this).index())) 
     }
 });

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <body>
        <div class="container">
           <div class="row">
               <div class="col-sm-4 col-sm-offset-1 col-xs-6">
                   <div class="well">
                       <ul class="my-list my-list-left">
                           <li data-value="1">Left Item 1</li>
                           <li data-value="2">Left Item 2</li>
                           <li data-value="3">Left Item 3</li>
                           <li data-value="4">Left Item 4</li>
                           <li data-value="5">Left Item 5</li>
                       </ul>
                   </div>
               </div>
               <div class="col-sm-4 col-sm-offset-1 col-xs-6">
                   <div class="well">
                      <ul class="my-list my-list-right">
                           <li data-value="1">Right Item 1</li>
                           <li data-value="2">Right Item 2</li>
                           <li data-value="3">Right Item 3</li>
                           <li data-value="4">Right Item 4</li>
                           <li data-value="5">Right Item 5</li>
                      </ul> 
                   </div>
               </div>
           </div> 
        </div>
    </body>
</html>

＆＃13;

Jquery插入列表元素，具有可排序的位置

2 个答案: