counter
स्मार्टक्यूए का लोगो

Jquery insert list element with sortable position

"jquery insert list element with sortable position" के लिए कोड उत्तर. हमें मिल 2 कोड उदाहरण पर स्मार्टक्यूए नीचे javascript श्रेणी।

आपको जो समाधान चाहिए वह खोजें!

हम 50 से अधिक भाषाओं के सामान्य प्रोग्रामिंग मुद्दों के लिए समाधान प्रदान करते हैं, आशा है कि इससे मदद मिलेगी!

उदाहरण #1

द्वारा Hexus 0👍
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');
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">&laquo; 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>

उदाहरण #2

द्वारा Alvaro Silvino 0👍
$('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())) 
     }
 });
<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>
प्रश्न और उत्तर स्टैक ओवरफ़्लो से एकत्र किए जाते हैं, cc by-sa 2.5, cc by-sa 3.0 और cc by-sa 4.0 के तहत लाइसेंस प्राप्त होते हैं।

समान प्रश्न