在jQuery中对相同类型的多个元素进行排序答案

【问题标题】：Sort Multiple Elements of the same type in jQuery在jQuery中对相同类型的多个元素进行排序
【发布时间】：2015-02-03 09:40:57
【问题描述】：

基本上我有以下由 PHP 呈现的内容：

<div class="parent">
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=1>1</div>
    <div class="child" data-sort=3>3</div>
</div>

<div class="parent">
    <div class="child" data-sort=1>1</div>
    <div class="child" data-sort=3>3</div>
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=2>2</div>
</div>

而我想要返回的是：

<div class="parent">
    <div class="child" data-sort=1>1</div>
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=3>3</div>
</div>

<div class="parent">
    <div class="child" data-sort=1>1</div>
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=3>3</div>
</div>

所以基本上它必须根据每个子元素的数据排序属性对父元素的多个实例进行排序，同时仍保持其在父元素中的状态。

您将如何使用 jQuery 来定位每个父元素，然后根据 data-sort 属性对该父元素中的每个子元素进行排序。

这是我最接近的，但它没有渲染任何东西：

<script>
jQuery(document).ready(function($) {
    jQuery.each('.parent', function(index, val) {
        jQuery(jQuery(this).children('.child')).sort(function(a,b){
            return a.dataset.sort > b.dataset.sort;
        }).appendTo(this);
    });
});
</script>

提前致谢！

【问题讨论】：

嗯，当然不是，jQuery 对象don't have a sort method。
我认为在 PHP 中更改输出顺序更容易。
输出基于 ajax 请求，所以我无法选择返回数据的顺序。感谢您的建议
另请注意，当您在ready 回调中接受$ 参数时，您可以在该回调中使用$ 代替jQuery。

标签： javascript jquery sorting

【解决方案1】：

您尝试在 jQuery 对象上使用 sort 方法，但他们没有（记录在案的）方法。不过，数组有一个sort，然后如果你附加排序后的数组，子元素会被移动：

jQuery(document).ready(function($) {
    $('.parent').each(function() {
        var p = $(this);
        p.append(p.children(".child").get().sort(function(a, b) {
            return $(a).attr("data-sort") - $(b).attr("data-sort");
        }));
    });
});

<div class="parent">
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=1>1</div>
    <div class="child" data-sort=3>3</div>
</div>

<div class="parent">
    <div class="child" data-sort=1>1</div>
    <div class="child" data-sort=3>3</div>
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=2>2</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

工作原理：

我们遍历.parent元素
在其中，我们获取孩子，并使用.get()

array

$(a).attr("data-sort") - $(b).attr("data-sort")

a

b

0

b

a

...并再次将其附加到父级，这会移动元素

请注意，以上假设.parent 元素中没有非.child 子元素，或者您希望.child 子元素在 .parent.

【讨论】：

【解决方案2】：

您可以遍历每个父元素并使用Array.sort 对其子元素进行排序：

var parent = $('.parent');
parent.each(function(){
   $(this).find('.child').sort(function (a, b) {
        return +a.dataset.sort - +b.dataset.sort;
   }).appendTo($(this));
});

Working Demo

【讨论】：

SE 政策特别不鼓励反对者发表评论。但我要指出，您声称这使用了Array#sort，但实际上您是在一个jQuery 对象上调用sort，而不是一个数组； jQuery 对象没有记录 sort 函数。
jquery 元素对象不过是元素数组。当然，您可以传递对象并编写条件以使用每个对象的属性来执行排序。
如果你认为 jQuery 对象是数组，那你就大错特错了。它们是类数组，但它们不是数组。它们没有所有的数组特征，也不能假设从一个点到下一个点都会存在未记录的特性。
我也从来没有提到 sort 是 jquery 方法
length is a documented property of jQuery objects

【解决方案3】：

既然你是在 php 中构建它，为什么不在那里构建排序数据。像这样：

<?php 
$arr[0] =array(2,1,3);
$arr[1] =array(1,3,2,2);
$data="";
foreach($arr as $key=>$val){
$data .="<div class='parent'>";
$x=$val;
sort($x);
foreach($x as $k=>$v){
    $data .="<div class='child' data-sort=$v>$v</div>";
}
$data .="</div>";

}
var_dump($data);
?>

【讨论】：

【解决方案4】：

你可以这样使用

$('.parent').each(function(index, val) {
    $this = $(this);
    sorted = $this.children().sort(function(a,b) {
        var vA = parseInt($(a).data("sort"));
        var vB = parseInt($(b).data("sort"));
        return (vA < vB) ? -1 : 1;
    })  
    $(sorted).appendTo($this);
});

工作示例是here

【讨论】：