Question

点击菜单链接是否可以按班级订购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>

对此有何想法？

提前致谢！

Answer 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/

Answer 2

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

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

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

Answer 3

为了排序任何东西，我使用的最好的jQuery插件是Tablesorter

按班级订购div

3 个答案: