Заказать divs по классу

Question

Можно ли заказать divs по классу при нажатии на ссылку меню? Вот мой код:

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

Что я хотел бы сделать это, когда я нажимаю на директоре или категориях в меню, я хотел бы, див с подсоединенным классом заказываются в верхней части.

Вот пример: Когда я нажимаю на 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 быть законным (закрой дивы), вы можете использовать это:

$(".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

Для ничего сортировки, лучший JQuery плагин, который я использовал это Tablesorter

Answer 3

Я думаю, что это хороший способ сделать это

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

Вот скрипка http://jsfiddle.net/Vgt4s/