Question

我正在尝试使用jquery对变换器内的元素进行排序，我使用这个小提琴作为参考http://jsfiddle.net/tc5dc/。我不知道可能有什么问题？

此外，如果有任何其他方式，我可以用更简单和干燥的方式完成这项工作。

                    <div class="container"><!--Container-->
                    <div class="element"><!--Single element-->
                        <div class="child1">                                
                        </div>
                        <div class="child2">
                            <div class="stats right">
                                <div class="stat">
                                    <h1 class="inv">0</h1>
                                    <h4 id ="mInv"class="sort" >Inv</h4>
                                </div>
                                <div class="stat">
                                    <h1 class="con">14</h1>
                                    <h4 id="mCon" class="sort" >Con</h4>
                                </div>
                                <div class="stat">
                                    <h1 class="ts">66</h1>
                                    <h4 id="mTs" class="sort" >TS</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="element"><!--Single element-->
                        <div class="child1">                                
                        </div>
                        <div class="child2">
                            <div class="stats right">
                                <div class="stat">
                                    <h1 class="inv">10</h1>
                                    <h4 id ="mInv"class="sort" >Inv</h4>
                                </div>
                                <div class="stat">
                                    <h1 class="con">12</h1>
                                    <h4 id="mCon" class="sort" >Con</h4>
                                </div>
                                <div class="stat">
                                    <h1 class="ts">90</h1>
                                    <h4 id="mTs" class="sort" >TS</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="element"><!--Single element-->
                        <div class="child1">                                
                        </div>
                        <div class="child2">
                            <div class="stats right">
                                <div class="stat">
                                    <h1 class="inv">17</h1>
                                    <h4 id ="mInv"class="sort" >Inv</h4>
                                </div>
                                <div class="stat">
                                    <h1 class="con">81</h1>
                                    <h4 id="mCon" class="sort" >Con</h4>
                                </div>
                                <div class="stat">
                                    <h1 class="ts">124</h1>
                                    <h4 id="mTs" class="sort" >TS</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

JS

function sortUsingNestedText(parent, childSelector, keySelector) {
var items = parent.children(childSelector).sort(function(a, b) {
    var vA = $(keySelector, a).text();
    var vB = $(keySelector, b).text();
    return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
}

/* setup sort attributes */
$('#mInv').data("sortKey", "h1.inv");
$('#mCon').data("sortKey", "h1.con");
$('#mTs').data("sortKey", "h1.ts");


/* sort on button click */
$("h4.sort").click(function() {
sortUsingNestedText($('#sortThis'), "div", $(this).data("sortKey"));

Answer 1

您立即遇到的一个问题是，尝试按孩子排序.element时，H1标签不是.element的孩子

<div class="element"><!--Single element-->
                    <div class="child1">                                
                    </div>
                    <div class="child2">
                        <div class="stats right">
                            <div class="stat">
                                <h1></h1>
                                <h4></h4>
                            </div>
                            <div class="stat">
                                <h1></h1>
                                <h4></h4>
                            </div>
                            <div class="stat">
                                <h1></h1>
                                <h4></h4>
                            </div>
                        </div>
                    </div>
                </div>

查看此元素.child1没有孩子，.child2有1个孩子，.stats有2个班级.stats and .right的div有3个子div，每个div有孩子h1和h4代码

var items = parent.children(childSelector).sort(function(a, b)

仅尝试向下排序1层

如果您希望保留所有嵌套功能，只需使用.find代替.children

即可。

编辑：小提琴显示另一种排序方式，这次将数据嵌套在您要排序的孩子的子项中;可能不是很好，但它的工作原理并让你了解可能的实现（即那里有改进的余地）http://jsfiddle.net/tc5dc/702/

小提琴代码：

<div class="container">
<div class="element">
    <div class="stat">
         <h1 class="inv">0</h1>
         <h4 id="mInv" class="sort">Inv</h4>
    </div>
    <div class="stat">
         <h1 class="ts">66</h1>
         <h4 id="mTs" class="sort">TS</h4>
    </div>
    <div class="stat">
         <h1 class="con">14</h1>
         <h4 id="mCon" class="sort">Con</h4>
    </div>
</div>

$("div.stat").click(function () {
        var list = $(".element").children("div");
        list.sort(sortDesc);
        $(".container").html("");
        $(".container").append(list);
    });

    function sortDesc(a, b) {
        var test1 = jQuery(a);
        var test2 = jQuery(b);
        return test1.find("h1").text() > test2.find("h1").text();
    }

按子div中的内容对父div进行排序

1 个答案: