jQuery TinySort问题

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的目标是父容器中的子元素。 ＆LT;李＆GT; ＆lt; ul＆gt;中的项目，父级＆lt; div＆gt;中相同类别的一系列项目等等。

将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"});
});