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

何かをソートするために、私が使用した最高のjQueryプラグインはTablesorterです

于 2013-03-20T18:51:15.833 に答える