0

手伝ってください！！！！カードのグループがあるという複雑な要件があります。クリックすると、同じグループのカードを昇順で並べ替える必要があります。グループ カードを作成したら、並べ替えボタンをクリックするたびに、そのグループ内のカードが再度並べ替えられます。

要件はちょうど

 <div class="main_div">
      <div class="connectedGroup">
        <div class="deck">4</div>
        <div class="club">3</div>
        <div class="deck">2</div>
        <div class="spade">9</div>
        <div class="deck">5</div>
        <div class="club">7</div>
        <div class="deck">5</div>
        <div class="spade">2</div>
        <div class="club">9</div>
      </div>
    </div>

並べ替え後の出力は

  <div class="main_div">
      <div class="connectedGroup">
        <div class="deck">2</div>
        <div class="deck">4</div>
        <div class="deck">5</div>
      </div>
      <div class="connectedGroup">
        <div class="spade">2</div>
        <div class="spade">9</div>
      </div>
      <div class="connectedGroup">
        <div class="club">3</div>
        <div class="club">7</div>
        <div class="club">9</div>
      </div>
    </div>

貴重なご意見お待ちしております

4

1 に答える 1

1

あなたの問題を解決するためにjQueryスクリプトを書き留めました。

$("a#order").on("click", function(){
    var wrapper = $(".main_div");
    var items = $(".connectedGroup div");
    var itemsHash = {};
    wrapper.find("div").remove();

    $.each(items, function(){
        var itemKind = $(this).attr("class");

        if(itemsHash[itemKind] == undefined) {
            itemsHash[itemKind] = [];
        }
        itemsHash[itemKind].push($(this).text());

    });

    $.each(itemsHash, function(item, value){
        var sortedList = itemsHash[item].sort();
        var cluster = "<div class='connectedGroup'>";

        $.each(sortedList, function(si, va){
            cluster += "<div class='"+item+"'>"+ va +"</div>";
        });

        cluster += "</div>";
        wrapper.append(cluster);
    });
});

これを確認する必要がありますhttp://jsfiddle.net/5RmC8/1/

jQuery を使用している場合は、これが役立つ場合があります。

「each」ステートメントを通常の「for」ループに変更すると、より高速になります。

私がしたことは、DOM要素を反復処理し、値の配列で「種類」（デッキ、クラブ、スペードなど）のハッシュを取得し、「sort（）」で昇順にソートすることです

例: hash["デッキ"] = [2, 4, 5];

次に、この新しいハッシュを繰り返し処理し、指定された例の 18 行目に見られるように、必要な要素を作成します。

私はあなたを助けることができたと思います

于 2013-10-07T19:41:51.733 に答える