根據數據屬性，以特定順序將DOM對象添加到數組中

Question

我正在構建一個自定義滑塊，以便最終用戶可以優先確定應該先放置哪些幻燈片，我認為最好的方法是在每個主要DOM元素上進行數據優先處理，首先設置為不透明度：0，這種情況下DOM元素的最大值為3。

但是，如您在代碼中看到的那樣，它將僅從上至下抓取DOM元素，而忽略數據值。

如何將它們以正確的順序放入數組？

    var hideSlide = 0;
    var showSlide = 1;
    var amountOfSlides = 2;
    var slideArray = [];
    var dataPriority = 1;

    $('.hero-detail-container').each(function(e) {
        if ( $(this).data('active') == '1' && $(this).data('priority') == '1' ) {
        slideArray.push($(this));
    }
    else if ( $(this).data('active') == '1' && $(this).data('priority') == '2' ) {
        slideArray.push($(this));
    }
    if ( $(this).data('active') == '1' && $(this).data('priority') == '3' ) {
        slideArray.push($(this));
    }

        // THE ISSUE IS HERE
        // The code will push to slideArray in the order
        // it sees the DOM elements from the top, even if
        // the priority says the first element is number 2 fx.

    });

    slideArray[0].css({
        "opacity": "1"
    });

    setInterval(function() {

        console.log(slideArray);

        slideArray[hideSlide].css({
            "opacity": "0"
        });
        slideArray[showSlide].css({
            "opacity": "1"
        });

        if ( showSlide >= amountOfSlides ) {
            hideSlide = amountOfSlides;
            showSlide = 0;
        }
        else if ( hideSlide == 2 && showSlide == 0 ) {
            hideSlide = 0;
            showSlide = 1;
        }
        else {
            hideSlide++;
            showSlide++;
        }

    }, slideTimer());

Answer 1

幾種方法可以做到這一點。

1：也有多個數組，您也要推送數據，然后在最后合並它們。

2：遍歷數據集多次以按所需順序進行。 使用JQuery獲取所需的元素。

3：添加元素后，對數組進行排序。

slideArray.sort(function(a,b){ return a.data('priority') - b.data('priority') });