按类别订购div

单击菜单链接时是否可以按课程顺序订购div？这里是我的代码：按类别订购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>

对这个有什么想法？

在此先感谢！

来源

2013-03-20 DrMtotheac

（HTTP [你尝试过什么？]：//www.whathaveyoutried。 com /）请参见[ask advice]（http://stackoverflow.com/questions/ask-advice）。 – 2013-03-20 18:48:37

你应该很高兴有这样一个可解决的问题。提示：'.text（）'，'.hasClass（）'，'.prependTo（parent）':-) – techfoobar 2013-03-20 18:50:25

可以使用的解决方案http://stackoverflow.com/questions/6730501/sort-table-rows-基于他们的班级名称（经过小幅调整） – jmbertucci 2013-03-20 18:54:52

后您解决您的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-20 18:54:31 jfriend00

@ user1853580 - 增加了一个较短的版本。 – jfriend00 2013-03-20 19:56:57

谢谢！这使它！但我想在某些导演上有姓和名，那么这是行不通的。你知道什么可以解决这个问题吗？这里是一个小提琴jsfiddle.net/caquA – DrMtotheac 2013-03-20 20:34:29

@DrMtotheac - 你必须展示你正在尝试使用的实际HTML。如果您在要点击的项目上放置类或自定义属性，最好使显示文本与您想要排序的内容无关。 – jfriend00 2013-03-20 20:38:50

-1

对于分选什么，我用过最好的jQuery插件是Tablesorter

来源

2013-03-20 18:51:15 doitlikejustin

我觉得这是一个很好的办法做到这一点

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

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

来源

2013-03-20 19:03:39 Ateszki

按类别订购div

回答

相关问题