时间戳

首页 > 解决方案 > 如何使用jQuery以与数组相同的顺序对html元素进行排序？

javascript - 如何使用jQuery以与数组相同的顺序对html元素进行排序？

问题描述

我想以与 arrayData 相同的顺序订购 html 元素。

JavaScript

    var arrayData = [59, 56, 57];

HTML

    <div class="selectize-input">
        <div class="item" data-value="56">Dog</div>
        <div class="item" data-value="57">Rabbit</div>
        <div class="item" data-value="59">Cat</div>
    </div>

我想要这样的结果。

    <div class="selectize-input">
        <div class="item" data-value="59">Cat</div>
        <div class="item" data-value="56">Dog</div>
        <div class="item" data-value="57">Rabbit</div>
    </div>

有什么好的方法可以实现这一点吗？先感谢您。

[附加] 我想得到这样的结果，但现在不知道如何将它应用于 html 元素并在浏览器上呈现。

const orderRule = ['Cat', 'Rabbit', 'Dog', 'Pig', 'Mouse'],
      array = ['Mouse','Rabbit', 'Pig', 'Dog', 'Cat'];

const sortArray = [...array].sort((a, b) => orderRule.indexOf(a) - orderRule.indexOf(b));
console.log(sortArray);

标签： javascriptjquery

解决方案

您可以使用循环遍历数组$.each，然后使用append在特定位置添加 div。

这是演示代码：

var arrayData = [59, 56, 57];
//looping through array
$.each(arrayData, function() {
//append div at particular positon using data-value
  $(".selectize-input").append($("div [data-value=" + this + "]"));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectize-input">
  <div class="item" data-value="56">Dog</div>
  <div class="item" data-value="57">Rabbit</div>
  <div class="item" data-value="59">Cat</div>
</div>

推荐阅读