如何使用 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