.


Divya


How to Add list items in specific order jQuery


<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<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>
<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>
jQuery(document).ready(function() {
jQuery("div.right").delegate("ul li", "click", function() {
jQuery("div.left ul").append(jQuery(this));
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);
});
jQuery("div.left ul").empty().append(sortedLis);
});
});
</script>
</body>
</html>

Run it yourself



.