Javascript Jquery/Css3中的卡片排序和分组，平滑过渡

帮帮我！！！！ 我有一个复杂的要求，我有一组卡，现在点击我必须排序在asc顺序相同的卡组。一旦我制作了组卡，每次我点击排序按钮，它都会再次对该组中的卡进行排序

需求就像

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

4.
3.
2.
9
5.
7.
5.
2.
9

在排序之后将被输出

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

2.
4.
5.
2.
9
3.
7.
9

---

等待您的宝贵建议

我刚刚写了一个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);
    });
});

$（“订单”）。在（“单击”，函数（）上{
变量包装=$（“.main_div”）；
变量项=$（“.connectedGroup div”）；
var itemsHash={}；
wrapper.find（“div”）.remove（）；
$.each（项、函数（）{
var itemKind=$（this.attr（“类”）；
if（itemsHash[itemKind]==未定义）{
itemsHash[itemKind]=[]；
}
itemsHash[itemKind].push（$（this.text（））；
});
$.each（项、函数（项、值）{
var sortedList=itemsHash[item].sort（）；
var集群=”；
$。每个（分类列表、功能（si、va）{
集群+=“”+va+“”；
});
集群+=“”；
append（集群）；
});
});

你应该检查一下

如果您使用的是jQuery，这可能会对您有所帮助

您可以将“each”语句更改为通常的“for”循环，这样更快

我所做的是迭代DOM元素，用一个值数组检索一个“种类”（deck、club、spade等）的散列，然后用“sort（）”对它们进行升序排序

示例：哈希[“deck”]=[2,4,5]

然后我迭代这个新的散列并创建所需的元素，如给定示例的第18行所示

希望我能帮助你