如何使用 jQuery 以与数组相同的顺序订购 html 元素？

Question

我想以与 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);

Answer 1

所以，我不太确定我是否完全理解这个问题。 但是，如果您尝试为每条数据动态呈现一个 div，您可以尝试类似...

JS：

const arrayData = [
    {value:59, title:"Cat"},
    {value:56, title:"Dog"},
    {...}
]

arrayData.forEach((dataObject) => {
    $('.selectize-input').append(
        document.createElement('div')
            .innerHTML(dataObj.title)
            .attr('data-value', dataObj.value)
            .addClass('item')
    )          
}

我不是一个真正的 jQuery 人，所以我不完全确定这会奏效，但我相信它会引导你走向正确的方向。

首先，我将您的数组制作成一个对象数组，其中既包括项目的值，也包括项目的标题。

然后，我使用 forEach 循环遍历每个项目并基于它创建一个新的 div。 它将这些 div 附加到.selectize-input 。

我希望它对你有帮助。

我应该说，你在这里做的事情是 ReactJS 非常擅长的。 它就像一个加强版的 javascript，允许您非常轻松地创建和操作 HTML 元素。

在https://reactjs.org/上查看！

Answer 2

您可以使用$.each您的数组，然后使用append在特定的 position 添加 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>

Answer 3

1. 如果您只有 html 中的父元素并且想要按排序顺序添加子 div，那么：

   const divList = [ {value:59, title:"Cat"}, {value:56, title:"Dog"} ]

    divList.forEach((obj) => { $("<div />").html(obj.title).attr('data-value', obj.value).addClass('item').appendTo( $('.selectize-input'))

   })

代码笔： https://codepen.io/AdityaDwivedi/pen/pojMYRr

2. 如果您已经在 html 中添加了 div 元素并且您想要对它们进行排序：

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

`

const divOrder = ["59", "56", "57"]
    const orderedDiv = $('.selectize-input > div').sort((a, b) =>
    divOrder.indexOf(a.id) - divOrder.indexOf(b.id)
    ); 



  $('.selectize-input').empty()

orderedDiv.map((obj) =>{
  $("<div />")
            .html(orderedDiv[obj].innerHTML)
            .attr('data-value', orderedDiv[obj].value)
            .appendTo( $('.selectize-input'))})

`

代码笔： https://codepen.io/AdityaDwivedi/pen/QWjeopv?editors=1111