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

基本上，我有以下由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>

2.
1.
3.
1.
3.
2.
2.

我想要的回报是：

<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>

1.
2.
3.
1.
2.
2.
3.

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

如何使用jQuery以每个父元素为目标，然后根据数据排序属性对该父元素中的每个子元素进行排序

这是我来过的最近的一次，但它没有表现出任何东西：

<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（文档）.ready（函数（$）{
每个（'.parent'，函数（索引，val）{
jQuery（jQuery（this）.children（'.child'））.sort（函数（a，b）{
返回a.dataset.sort>b.dataset.sort；
}).附于（本）；
});
});

---

提前谢谢

您可以迭代每个父元素，并使用以下命令对其子元素进行排序：

---

您尝试在jQuery对象上使用

排序方法，但它们没有（文档化的）方法。数组有一个
排序
，但是，如果附加排序的数组，子数组将被移动：


jQuery（文档）.ready（函数（$）{
$（'.parent'）。每个（函数（）{
var p=$（本）；
p、 追加（p.children（“.child”）.get（）.sort（函数（a，b）{
返回$（a）.attr（“数据排序”）-$（b）.attr（“数据排序”）；
}));
});
});

2.
1.
3.
1.
3.
2.
2.
既然您是在php中构建的，为什么不在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);
?>

您可以这样使用

$('.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);
});

$（'.parent'）。每个（函数（索引，val）{
$this=$（this）；
排序=$this.children（）.sort（函数（a，b）{
var vA=parseInt（$（a）.data（“sort”）；
var vB=parseInt（$（b）.data（“sort”）；
回报率（vA

工作示例是
当然不是jQuery对象。我认为在PHP中更改输出顺序更容易。输出基于ajax请求，因此我无法选择返回数据的顺序。感谢您的建议。另请注意，当您在
ready
回调中接受
$
参数时，您可以在该回调中使用
$
for
jQuery
。SE政策特别不鼓励投票人发表评论。但我要指出，您声称这使用了
Array#sort
，但实际上您是在jQuery对象上调用
sort
，而不是在数组上；jQuery对象没有文档化的
sort
函数。jQuery元素对象只是元素数组。当然，您可以传递对象并编写使用每个对象属性执行排序的条件。它们类似于数组，但不是数组。它们并没有所有的数组特性，也不能安全地假设从一个dot版本到下一个dot版本都存在未记录的特性
$('.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);
});