如何使用javascript在點擊數據屬性時對我的div進行排序？

Question

我有多個div，我希望能夠通過點擊各種數據屬性，以下拉排序樣式進行排序。 （對不起所有絨毛。的div是「元素-1」和所述容器是「板容器」。

var divList = $(".element-1"); 

function sortPrice(){ 
divList.sort(function(a, b){ return  
$(a).data("price")-$(b).data("price")});  
$(".board-container").html(divList);} 

function sortPopularity(){ 
divList.sort(function(a, b){ return 
$(a).data("popularity")-$(b).data("popularity")});  
$(".board-container").html(divList);} 


<div class="board-container"> 
    <div class="element-1" data-date="4" data-popularity="3"> 
    <a class="group1" href="img/zayn.png"> 
     <div class="overlay-wrapper"> 
      <div class="overlay-text"> 
       <div class="table"> 
        <div class="cell"> 

         <div class="title">King Kunta</div> 
         <div class="artist">Kendrick Lamar</div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <img src="img/kunta.png"> 
    </div> 
    <div class="element-1" data-date="3" data-popularity="3"> 
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?  rel=0&amp;wmode=transparent"> 
    <div class="overlay-wrapper"> 
      <div class="overlay-text"> 
       <div class="table"> 
        <div class="cell"> 

         <div class="title">King Kunta</div> 
         <div class="artist">Kendrick Lamar</div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <img src="img/astrid.png"> 
    </div> 
    <div class="element-1" data-date="1" data-popularity="12"> 
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?rel=0&amp;wmode=transparent"> 
    <div class="overlay-wrapper"> 
      <div class="overlay-text"> 
       <div class="table"> 
        <div class="cell"> 

         <div class="title">King Kunta</div> 
         <div class="artist">Kendrick Lamar</div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <img src="img/zayn.png"> 
    </div> 
    <div class="element-1" data-date="5" data-popularity="1"> 
    <div class="overlay-wrapper"> 
      <div class="overlay-text"> 
       <div class="table"> 
        <div class="cell"> 
         <div class="title">King Kunta</div> 
         <div class="artist">Kendrick Lamar</div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <img src="img/jason.png"> 
    </div> 
    </div> 

Answer 1

使用一個下拉和綁定改變事件處理程序的基礎上，選擇的值的元素的處理程序中排序。

var $divList = $(".element-1"); 
 

 
$('#drop').change(function() { 
 
    var prop = this.value; 
 
    $divList.sort(function(a, b) { 
 
    return $(a).data(prop) - $(b).data(prop) 
 
    }).appendTo(".board-container") 
 
}).change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="drop"> 
 
<option value="date">Date</option> 
 
<option value="popularity">Popularity</option> 
 
</select> 
 
<div class="board-container"> 
 
    <div class="element-1" data-date="4" data-popularity="3"> 
 
    <a class="group1" href="img/zayn.png"> 
 
     <div class="overlay-wrapper"> 
 
     <div class="overlay-text"> 
 
      <div class="table"> 
 
      <div class="cell"> 
 

 
       <div class="title">King Kunta</div> 
 
       <div class="artist">Kendrick Lamar</div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </a>1 
 
    <img src="img/kunta.png" /> 
 
    </div> 
 
    <div class="element-1" data-date="3" data-popularity="3"> 
 
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?  rel=0&amp;wmode=transparent"> 
 
     <div class="overlay-wrapper"> 
 
     <div class="overlay-text"> 
 
      <div class="table"> 
 
      <div class="cell"> 
 

 
       <div class="title">King Kunta</div> 
 
       <div class="artist">Kendrick Lamar</div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </a>2 
 
    <img src="img/astrid.png"> 
 
    </div> 
 
    <div class="element-1" data-date="1" data-popularity="12"> 
 
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?rel=0&amp;wmode=transparent"> 
 
     <div class="overlay-wrapper"> 
 
     <div class="overlay-text"> 
 
      <div class="table"> 
 
      <div class="cell"> 
 

 
       <div class="title">King Kunta</div> 
 
       <div class="artist">Kendrick Lamar</div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </a>3 
 
    <img src="img/zayn.png"> 
 
    </div> 
 
    <div class="element-1" data-date="5" data-popularity="1"> 
 
    <div class="overlay-wrapper"> 
 
     <div class="overlay-text"> 
 
     <div class="table"> 
 
      <div class="cell"> 
 
      <div class="title">King Kunta</div> 
 
      <div class="artist">Kendrick Lamar</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>4 
 
    <img src="img/jason.png"> 
 
    </div> 
 
</div>