Question

我陷入了重新排列的范围。你可以帮我解决一下吗？

我有这样的html结构。

<div class="mainUl">
<span row="0" col="0">
        00
</span>
<span row="2" col="2">        
        22
</span>
<span row="1" col="0">
        10
</span>
<span row="1" col="1">
        11
</span>
<span row="2" col="0">
        20
</span>
<span row="3" col="0">
        30
</span>
<span row="2" col="1">
        21
</span>
</div>

我想使用jquery以升序重新排列所有跨度。

像这样输出。

<div class="mainUl">
<span row="0" col="0">
        00
</span>
<span row="1" col="0">
        10
</span>
<span row="1" col="1">
        11
</span>
<span row="2" col="0">
        20
</span>
<span row="2" col="1">
        21
</span>
<span row="2" col="2">
        22
</span>
<span row="3" col="0">
        30
</span>
</div>

伙计们，请帮帮我。

Answer 1

请遵循您收到的建议，但这可能是您的起点：

$('.mainUl > span').sort(function(a, b){
    var ar = a.getAttribute("row");
    var ac = a.getAttribute("col");
    var br = b.getAttribute("row");
    var bc = b.getAttribute("col");

    if (ar > br){
        return ar > br;
    };

    if (ar == br){
        if (ac > bc){
            return ac > bc;
        };
    };

}).appendTo('.mainUl');

http://jsfiddle.net/4xyq9/

-----编辑-----

问题不在于元素的数量，但是这是一个用10个元素测试的新版本

$('.mainUl > span').sort(function(a, b){
    var ar = a.getAttribute("row");
    var ac = a.getAttribute("col");
    var br = b.getAttribute("row");
    var bc = b.getAttribute("col");

    if (ar > br){
        return 1;
    };

    if (ar < br){
        return -1;
    };

    if (ar == br){
        if (ac > bc){
            return 1;
        };

        if (ac < bc){
            return -1;
        };
    };

}).appendTo('.mainUl');

http://jsfiddle.net/4xyq9/20/

如何使用jquery使用rows和columns属性对span进行排序？

1 个答案: