0

单击菜单链接时是否可以按类排序 div？这是我的代码：

<ul class="directors-menu">
    <li>director1</li>
    <li>director2</li>
    <li>director3</li>
    <li>commercial</li>
    <li>promo</li>
    <li>short</li>
</ul>
<div class="films">
    <div class="director1 commercial"></div>
    <div class="director1 promo"></div>
    <div class="director2 commercial"></div>
    <div class="director2 short"></div>
    <div class="director3 commercial"></div>
</div>

我想做的是，当我单击菜单中的导演或类别时，我希望将具有连接类的 div 排序在顶部。

这是一个示例：当我单击菜单中的 director2 时，我希望代码更改为：

<ul class="directors-menu">
    <li>director1</li>
    <li>director2</li>
    <li>director3</li>
    <li>commercial</li>
    <li>promo</li>
    <li>short</li>
</ul>
<div class="films">
    <div class="director2 commercial"></div>
    <div class="director2 short"></div>
    <div class="director1 commercial"></div>
    <div class="director1 promo"></div>
    <div class="director3 commercial"></div>
</div>

对此有什么想法吗？

提前致谢！

4

3 回答 3

1

在你修复你的 HTML 是合法的（关闭你的 div）之后，你可以使用这个：

$(".directors-menu li").click(function() {
    var cls = $(this).text();
    var films = $(".films");
    films.find("." + cls).each(function() {
        films.prepend(this);
    });
});

工作演示：http: //jsfiddle.net/jfriend00/43muT/

而且，更短的版本：

$(".directors-menu li").click(function() {
    var films = $(".films");
    films.find("." + $(this).text()).prependTo(films);
});

工作演示：http: //jsfiddle.net/jfriend00/nLV2j/

最好在可点击项目上放置一个自定义属性，以便显示文本可以是任何内容，并且您可以直接控制排序键，如下所示：

这是HTML：

<ul class="directors-menu">
    <li data-sort="director1">Sort by Director 1</li>
    <li data-sort="director2">Sort by director 2</li>
    <li data-sort="director3">Sort by director 3</li>
    <li data-sort="commercial">commercial</li>
    <li data-sort="promo">promo</li>
    <li data-sort="short">short</li>
</ul>
<div class="films">
    <div class="director2 commercial">d2</div>
    <div class="director2 short">d2</div>
    <div class="director1 commercial">d1</div>
    <div class="director1 promo">d1</div>
    <div class="director3 commercial">d3</div>
</div>

而且，代码：

$(".directors-menu li").click(function() {
    var films = $(".films");
    films.find("." + $(this).data("sort")).prependTo(films);
});

工作演示：http: //jsfiddle.net/jfriend00/GZhtr/

于 2013-03-20T18:54:31.403 回答
0

我认为这是一个很好的方法

$(".directors-menu li").click(function(e){
    $("div."+$(this).text()).prependTo("div.films");
});

这是一个小提琴http://jsfiddle.net/Vgt4s/

于 2013-03-20T19:03:39.850 回答
-1

For sorting anything, the best jQuery plugin I have used is Tablesorter

于 2013-03-20T18:51:15.833 回答