jQuery TinySort Problems

Question

我正在研究一個腳本，它將利用jQuery TinySort Extension根據下拉更改選擇對div進行排序。

出於某種原因，我無法讓它正常工作。

JS代碼：

$("#sort").change(function(){ 
      var column = $(this).val(); 

      console.log(column); 
      $(".r1_contenders_videos_wrapper .wcje_judges_video").tsort("div[class*='" + column + "']", { 
       order:"asc" 
      }); 
     }) 

用於分揀HTML標記的實施例：

<div class="wcje_judges_video"> 
    <div class="judges_video_thmb"> 
      <a href="http://url.com/watch/87ujuhy77676"> 
       <img class="video_img" width="200px" src="link_to_image" alt="Test User"/> 
       <img class="wcje_play" src="/assets/images/play-btn-sm.png" /> 
       <img class="wcje_flag" src="/assets/images/flags_lg/5.png" /> 
      </a> 
    </div> 
    <h3 class="wcje_video_song_title">I want it all</h3> 
    <p class="contender_name">Dennis M.</p> 
    <p class="contender_country">United States</p> 
</div> 

<div class="wcje_judges_video"> 
    <div class="judges_video_thmb"> 
      <a href="http://url.com/watch/87ujuhy77676"> 
       <img class="video_img" width="200px" src="link_to_image" alt="Test User"/> 
       <img class="wcje_play" src="/assets/images/play-btn-sm.png" /> 
       <img class="wcje_flag" src="/assets/images/flags_lg/5.png" /> 
      </a> 
    </div> 
    <h3 class="wcje_video_song_title">Not today</h3> 
    <p class="contender_name">Chris S.</p> 
    <p class="contender_country">Canada</p> 
</div> 

選擇選項標記：

<select name="sort" id="sort"> 
       <option value="contender_name">Alphabetical</option> 
       <option value="wcje_video_song_title">Song</option> 
       <option value="contender_country">Country</option> 
      </select> 

所以基本上我有選項的值選擇要匹配我想要對div進行排序的div類名稱，但無法使其正常工作。沒有錯誤或任何東西都不起作用......關於我可能做錯什麼的想法？

Answer 1

jquery.tinysort針對父容器中的子元素。 < li> < ul>中的項目，父項< div>中的同一類的一系列項目等。

將您wcje_judges_video-的div在容器

<div id="video_container"> 
..your HTML here 
</div> 

..和以下工作：

$("#sort").change(function(){ 
    var column = $(this).val(); 
    $("div#video_container>.wcje_judges_video").tsort('.'+column, {order:"asc"}); 
});