Question

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

提前致谢！

Answer 1

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

＆＃13;

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");
        }));
    });
});

＆＃13;

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

＆＃13;

如何运作：

我们遍历.parent元素
在这些内容中，我们通过.get()

数组

然后我们使用回调对该数组进行排序，该回调利用了这样一个事实：当你对字符串使用二进制-运算符时，它们会被转换为数字;因此，$(a).attr("data-sort") - $(b).attr("data-sort")最终为a的订单的结果是b的订单低于0，b如果它们相同，或者为正a的订单高于.child
...并再次将其附加到父级，这会移动元素

请注意，上述内容假定.parent元素中没有非.child个子元素，或者您希望.parent个孩子在之后结束 > {{1}}中的任何其他孩子。

Answer 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

Answer 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);
?>

Answer 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

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

4 个答案:

Working Demo