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

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

该程序按默认情况下隐藏的孙子div的项进行排序。“权重值”是我希望排序的值（如果它低于某个点，则将其移动到另一个表）

对项目进行排序时，其中包含某种重写的项目将被排序到另一个“不太可能被调用”的表中

下面是我目前的代码：

<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

测试1
西部
体重：56
Value1：这里的值。值2：这里的值。值3：这里的值。值4：这里的值。值5：这里的值

DbValue1:123、DbValue2:1234、DbValue3、123456 DbValue4:123、DbValue5:1234、DbValue6、123456
覆盖：0
…此处有更多div/值
测试3
西部
…此处有更多div/值

到目前为止，我一直试图用jQuery来实现这一点，但进展并不顺利。我不知道如何处理“如果”逻辑或如何处理排序，我仍在努力从一个区域移动到另一个区域

我一直在尝试的代码包含一个提交按钮：

<script type="text/javascript">

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

$（文档）.ready（函数（）{
$（.input.buttonDhide”）。单击（函数（）{$（.row”）。查找（.left”）.hide（“slow”）；}）；
)};
)};

编辑：注意，上面的代码实际上只是为了看看我是否可以这样选择一个元素，但它根本不起作用

---

编辑：将标记更改为使用类，因为我错误地复制了id，现在都设置在那里了。

对我来说，这似乎是一个非常适合的选项。您可以直接对绑定到html结构的javascript数组（ko.observatarray）进行排序，而不是使用jQuery来尝试通过类或数据属性来查找某些元素进行排序

展示一种你可以做到这一点的方法。我不确定是否要检查权重或覆盖变量，所以我只使用了（if overrides==1）。你可以很容易地改变它，即（如果重量<10）。我强烈建议您阅读一些Knockout.js教程。在我看来，这是一场非常激烈的比赛…哥拉米

为了以防万一，我将在这里包含代码。请记住，这可能也可能需要清理一下：

HTML:

---

您的html无效，不允许重复的

id

a，请使用

class

。是否有原因不使用表（看起来像是表格数据），然后您可以使用jQuery排序：我使用div代替表，基本上做了相同的事情：。左{display:table cell；}。右{display:table cell；}。中{显示：表单元格；}行{显示：表行；高度：45 px；边距左：Auto.LoopeOrth:Auto；；您复制IDS，这是无效的HTML。我会考虑将这些数据添加到某种JavaScript数组中，而不是将其隐藏在标记中。

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

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