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

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 定位每个父元素，然后根据数据排序属性对该父元素中的每个子元素进行排序。

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

<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 方法，但他们没有(有记录的)方法。不过，数组有一个排序，然后如果您追加排序后的数组，子元素就会被移动:

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 中的任何其他子级结束。