jQuery TinySort问题

Question

我正在编写一个脚本，它将利用jQuery TinySort扩展来根据下拉更改选择对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的目标是父容器中的子元素。中的项、父级中同一类的一系列项等等。

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