データ属性に基づいて特定の順序でDOMオブジェクトを特定の順序で追加する

Question

エンドユーザーの可能性を考慮して、カスタムスライドを作成して、どのスライドを優先するかを優先して、これはメインの各DOM要素でデータ優先度を設定していましたが、これはOpacity：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') });