Javascript jQuery更改ID小于$（this.attr（“ID”）的所有div的ID；

我有一个可排序的元素网格，在用户移动元素后将其值更新为DB。问题是，我不知道如何在不重新加载页面的情况下将以前所有元素的id更新为新元素

在PHP中，我会从我以前的一个页面的FAQ中执行类似于以下代码的操作，但我不能使用PHP它必须在用户放置他移动的元素后立即进行任何页面重新加载：

if ($old_order > $order){
    $result = dbquery("UPDATE faq SET orders=orders+1 WHERE orders>='$order' AND orders<='$old_order'");
}else{
    $result = dbquery("UPDATE faq SET orders=orders-1 WHERE orders>='$old_order' AND orders<='$order'");
}

Html代码基本上是这样的，其中的内容位于与之相关的div中：

echo "<div class='sorted-icons' id='icon_$id'>";

---

仍然存在PHP部分tho的问题。它以奇怪的顺序保存它们。

好的，所以我的PHP代码中有一个小错误，但我设法用非常简单的代码修复了jQuery：

$(".content-page").sortable({
    start: function(e,ui){
        ui.placeholder.height($(".sorted-icons").outerHeight(true));
        ui.placeholder.width($(".sorted-icons").outerWidth(true));
    },
    placeholder: 'placeholder',
    items: '.sorted-icons:not(.new_icon)',
    update: function(e,ui) {
        var order = $(this).sortable("serialize") + '&order=icons' + '&content_id=' + $(this).attr("data-shortcut-id");
        console.log(order);
        $.post("page_ajax.php", order);
        // THIS PART //
        var i = 0;
        $(this).children('.sorted-icons').each(function(){
            $(this).attr('id', 'icon_' + i);
            i++;
        });
        // THIS PART //
    }
}).disableSelection();

---

希望可以帮助其他人。

我不明白-你能在这里使用php吗？不，我必须使用jQuery，因为我不能每次用户移动某个元素时都重新加载页面。你能为此创建一个提琴吗？我不能，因为你可以看到它们正常地重新设置了范围，但是当你刷新页面并从数据库加载数据时，它的顺序是错误的。我能做的就是做一个提琴，向你显示ID和它应该具有的ID作为警报。html和你的javascript/jquery就足够了

var i = 0;
$(this).children('.sorted-icons').each(function(){
    $(this).attr('id', 'icon_' + i);
    i++;
});

$(".content-page").sortable({
    start: function(e,ui){
        ui.placeholder.height($(".sorted-icons").outerHeight(true));
        ui.placeholder.width($(".sorted-icons").outerWidth(true));
    },
    placeholder: 'placeholder',
    items: '.sorted-icons:not(.new_icon)',
    update: function(e,ui) {
        var order = $(this).sortable("serialize") + '&order=icons' + '&content_id=' + $(this).attr("data-shortcut-id");
        console.log(order);
        $.post("page_ajax.php", order);
        // THIS PART //
        var i = 0;
        $(this).children('.sorted-icons').each(function(){
            $(this).attr('id', 'icon_' + i);
            i++;
        });
        // THIS PART //
    }
}).disableSelection();