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，这可能会对您有所帮助。

您可以将“每个”语句更改为通常的“for”循环，它更快。

我所做的是遍历 DOM 元素并使用一组值检索“种类”（甲板、俱乐部、铲子等）的哈希，然后使用“sort()”对它们进行升序排序

示例：hash["deck"] = [2, 4, 5];

然后我遍历这个新哈希并创建所需的元素，如给定示例的第 18 行所示。

希望我能帮到你

于 2013-10-07T19:41:51.733 回答