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

Sort Multiple Elements of the same type in jQuery

本文关键字：元素 排序 jQuery 同类型      更新时间：2023-09-26

基本上我有以下由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 来定位每个父元素，然后根据数据排序属性对该父元素中的每个子元素进行排序。

这是我最接近的一次，但它没有呈现任何东西：

<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 对象上使用 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()得到他们的数组

  • 然后我们对数组进行排序，使用回调，该回调利用了以下事实：当你在字符串上使用二进制-运算符时，它们会被转换为数字;所以$(a).attr("data-sort") - $(b).attr("data-sort")最终是负的，a的阶低于b的，0如果它们相同，或者如果b的阶高于a的序，则为正

    • 。

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

请注意，上述假设.parent元素中没有非.child子元素，或者您希望.child子元素最终排在.parent中的任何其他子项之后。

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

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

工作演示

既然你在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);
});

工作示例在这里

相关文章：