Question

我想用jQuery更改div顺序：

    <div id="container">
    <div class="land">Example A</div>
    <div class="land">Example B</div>
   <div class="land">Example D</div>
    <div class="land">Example C</div>
    <div class="land">Example G</div>
   <div class="land">Example E</div>
    <div class="land">Example F</div>
   <div class="land">...</div>
</div>

我有列表div（10 div）.Div与内容“示例C”可以站在任何位置。我可以使用“实例C”始终在顶部对内容进行分类吗？

我该怎么做？

感谢您的帮助

Answer 1

如果添加容器div，订购会变得容易。

<div id="container">
    <div class="land">Example A</div>
    <div class="land">Example B</div>
    <div class="land">Example C</div>
</div>

var container = $('#container');
var items = container.children('div');
container.append(items.get().reverse());

见JSFiddle。

修改：要使“示例C”始终显示在顶部，您可以使用以下内容：

var container = $('#container');
var top = container.find('div:contains("Example C")');
var items = container.children('div');

container.append(items.get().reverse()).prepend(top);

这会按值选择“示例C”，但您可以将其更改为例如由特殊类别选择：

<div class="land top">Example C</div>

var top = container.find('div.top');

查看更新的JSFiddle。

编辑2：您改变了自己的问题，但我并不完全明白您要实现的目标。如果您不需要撤销订单，只需使用：

var container = $('#container');
var top = container.find('div:contains("Example C")');
container.prepend(top);

查看更新的JSFiddle。

Answer 2

没有＆＃34;排序＆＃34;函数原生在jQuery中实现，但添加一次很容易！

看一下这个来源：

http://james.padolsey.com/javascript/sorting-elements-with-jquery/

$('.lang').sortElements(function(a, b) {
    // This is a text to text comparison, but you can add what ever you want, even random comparison !
    return $(a).text() > $(b).text() ? 1 : -1;
});

Answer 3

var parent = $('.land').first().parent();

$('.land').first().appendTo(parent);
$('.land').first().next().prependTo(parent);

jsfiddle here

如果您想使某个元素始终位于顶部，请不要使用这种方式，而是使用CSS z-index属性。具有较高z-index的每个元素将以更高级别显示

jsfiddle about z-index

Answer 4

您可以使用此

对div进行排序

  $(document).ready(function () {
        var searchcondition = "Example C";
        var temp = "";
        $(".land:contains('" + searchcondition + "')").each(function (index, value) {

            temp += $(this)[0].outerHTML;
        });

        $(".land").not(":contains('" + searchcondition + "')").each(function (index, value) {
            temp += $(this)[0].outerHTML;
        });
        $("#container").html(temp);

    });

“示例C”始终位于顶部，并且在它之后保持div

更改订单工具div

4 个答案: