jquery - 使用 Jquery 根据 div 中的值进行排序

Question

所以我正在编写一个程序，需要根据 div 的内容进行排序。我想要的是两件事:

1. 程序按照默认情况下隐藏的孙子 div 的项目进行排序。 “权重值”是我希望排序的依据(如果它低于某个点，请将其移动到另一个表)

2. 对项目进行排序时，其中具有某种覆盖的项目将被排序到另一个“不太可能被调用”的表中

这是我目前的代码:

<div id="likelyToBeCalled">
    <div class="likelyOddHeader" id="Test1">
        <div class="likelyOddA">Test1</div>
        <div class="likelyOddB"><img src="image002.png"/></div>
        <div class="timeZone">West</div>
    </div>
    <div class="hidden">
            <div class="weight">Weight:56</div>
            <div class="values">Value1: Value Here.  Value 2: Value Here. Value 3: Value Here.  Value 4:  Value here.  Value5: Value here. <br />
                                            DbValue1: 123, DbValue2: 1234, DbValue3, 123456 DbValue4: 123, DbValue5: 1234, DbValue6, 123456</div>
            <div class="overrides">Overrides: 0</div>
    </div>
...More divs / values here

<div id="unlikelyToBeCalled">
    <div class="likelyOddHeader" name="Test3">
        <div class="likelyOddA">Test3</div>
        <div class="likelyOddB"><img src="image002.png"/></div>
        <div class="timeZone">West</div>
    </div>
...More divs / values here

到目前为止，我一直在尝试仅使用 jQuery 来实现此目的，但进展并不顺利。我不知道如何处理“if”逻辑或如何处理排序，而且我仍在努力从一个区域移动到另一个区域......

我一直在尝试的代码涉及一个提交按钮:

<script type="text/javascript">

$(document).ready(function() {
$("input.buttonDhide").click(function(){ $(".row").find(".left").hide("slow"); });
)};
)};
</script>

编辑:请注意，上面的代码实际上只是为了看看我是否可以通过这种方式选择一个元素，但它根本不起作用。

编辑:更改标记以使用类，因为我错误地重复了 id，现在全部设置在那里。

Answer 1

对我来说，这似乎是 knockout.js 的完美候选者。 。您可以直接对绑定(bind)到 html 结构的 javascript 数组 (ko.observableArray) 进行排序，而不是尝试通过 jQuery 的类或数据属性来查找某个元素来进行排序。

Here's a hastily thrown together jsdfiddle展示一种可以做到这一点的方法。我不确定您是否想要检查权重或覆盖变量，所以我只是使用了 (if overrides == 1)。你可以很容易地改变它，即(如果重量<10)。我强烈建议您阅读一些 Knockout.js 教程。在我看来，这太棒了...Gorlami!

为了以防万一，我将在此处包含代码。请记住，这可以而且可能应该稍微清理一下:

HTML:

<div data-bind="with: likelyToBeCalled">
    <div data-bind="with: likelyOddHeader">
        <div data-bind="text: likelyOddA"></div>
        <div><img data-bind="attr: { src: likelyOddB }" alt="" /></div>
        <div data-bind="text: timeZone"></div>
    </div>
    <div data-bind="foreach: hidden">
        <div data-bind="text: 'Weight: ' + weight"></div>
        <div data-bind="text: 'Values: ' + values"></div>
        <div data-bind="text: 'Overrides: ' + overrides"></div>
    </div>
</div>

<p>
    <button data-bind="click: buttonClick">Sort likely to be called</button>
</p>

<div data-bind="with: unlikelyToBeCalled">
    <div data-bind="with: likelyOddHeader">
        <div data-bind="text: likelyOddA"></div>
        <div><img data-bind="attr: { src: likelyOddB }" alt="" /></div>
        <div data-bind="text: timeZone"></div>
    </div>
    <div data-bind="foreach: hidden">
        <div data-bind="text: 'Weight: ' + weight"></div>
        <div data-bind="text: 'Values: ' + values"></div>
        <div data-bind="text: 'Overrides: ' + overrides"></div>
    </div>
</div>

还有 JS(不要忘记包含 Knockout.js):

var viewModel = {
    likelyToBeCalled: {
        likelyOddHeader: {
            likelyOddA: "Test1",
            likelyOddB: "image001.png",
            timeZone: "West"
        },
        hidden: ko.observableArray([
            { weight: 56, values: "your values string 1", overrides: 1 },
            { weight: 20, values: "your values string 2", overrides: 0 },
            { weight: 12, values: "your values string 3", overrides: 0 },
            { weight: 16, values: "your values string 4", overrides: 1 }
        ])
    },
    unlikelyToBeCalled: {
        likelyOddHeader: {
            likelyOddA: "Test2",
            likelyOddB: "image002.png",
            timeZone: "East"
        },
        hidden: ko.observableArray([
            { weight: 1, values: "your values string 4", overrides: 1 }
        ])
    },
    buttonClick: function () {
        var likely = viewModel.likelyToBeCalled;
        var unlikely = viewModel.unlikelyToBeCalled;

        for (var i in likely.hidden()) {
            if (likely.hidden()[i].overrides == 1) {
                unlikely.hidden.push(likely.hidden()[i]);
                likely.hidden.remove(likely.hidden()[i]);
            }
        }

        likely.hidden.sort(function (a, b) {
            return a.weight > b.weight ? 1 : -1;
        });
    }
};

ko.applyBindings(viewModel);