按類別訂購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

回答

相關問題