Hinzufügen von DOM-Objekten zu einem Array in einer bestimmten Reihenfolge, basierend auf Daten-Attribut

Question

Ich bin ein benutzerdefiniertes Slider, mit der Möglichkeit für den Endbenutzer zu priorisieren, welche Folien zuerst kommen sollten, dachte ich, der beste Weg zu tun Das machte eine Datenpriorität für jedes der Haupt-DOM-Elemente, die zu Beginn mit Opacity: 0 belegt sind, das Maximum von DOM-Elementen ist in diesem Fall 3.

Wie Sie jedoch im Code sehen können, Es greift einfach die DOM-Elemente von oben und unten auf und ignoriert den Datenwert.

Wie lege ich diese in der richtigen Reihenfolge in das Array?

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

Paar Methoden, dies zu tun.

1: Haben Sie mehrere Arrays, pushen Sie auch Daten und kombinieren Sie sie dann am Ende.

2: Wiederholen Sie den Durchlauf des Datensatzes, um die gewünschte Reihenfolge einzugeben. Verwenden Sie JQuery, um die gewünschten Elemente zu erhalten.

3: Sortieren Sie das Array, nachdem Sie die Elemente hinzugefügt haben.

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