Question

示例DOM：

<ul class="children">
     <li class="child_container" rel="1803">
         <input type="hidden" name="content_child_meta[1803][sort_order]" value="2">
     </li>
     <li class="child_container" rel="2843">
         <input type="hidden" name="content_child_meta[2843][sort_order]" value="1">
     </li>
     <li class="child_container" rel="3803">
         <input type="hidden" name="content_child_meta[3803][sort_order]" value="3">
     </li>
</ul>

尝试排序＆lt; \ li＆gt;使用嵌套输入中的值。

试过以下：

var child_container = jQuery("ul");
child_container.find("li.child_container").sort(function (a, b) {
                return +a.find("input[name$='[sort_order]']").val() - +b.find("input[name$='[sort_order]']").val();
            })
            .appendTo( child_container );

以及其他一些变种，但这些家伙没有运气排队......

任何帮助？

Answer 1

您可以使用：

$(".children li").sort(sort_li).appendTo('.children');
function sort_li(a, b){
   return (parseInt($(b).find('input').val(), 10)) < (parseInt($(a).find('input').val(), 10)) ? 1 : -1;    
}

<强> Working Demo

Answer 2

因为jQuery是一种数组，所以Array.prototype.sort()可以很好地工作;排序后，您可以将这些元素推回到父级中。

总之它看起来像这样：

＆＃13;

$(".children").append(function() {
    return $(this).children().sort(function(a, b) {
        return $('input', a).val() - $('input', b).val();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="children">
     <li class="child_container" rel="1803">
         <input type="hidden" name="content_child_meta[1803][sort_order]" value="2">
     </li>
     <li class="child_container" rel="2843">
         <input type="hidden" name="content_child_meta[2843][sort_order]" value="1">
     </li>
     <li class="child_container" rel="3803">
         <input type="hidden" name="content_child_meta[3803][sort_order]" value="3">
     </li>
</ul>

＆＃13;

Answer 3

$(document).ready(function(){    
  $('#order').click(function(){    
    var sorted =$('.children').find('input:hidden').sort(function(a,b){ 
      return parseInt(a.value)- parseInt(b.value)
    });  
    for(var i=0;i<=sorted.length;i++){
      $('.children').append($(sorted[i]).parent('li'));
    }    
  });
});`

通过嵌套的隐藏输入值对<li>元素进行排序</li>

3 个答案: