Question

以下是Adam Laki为菜单生成器制作的示例 https://codepen.io/adamlaki/pen/bZrxZO

我已经合并了一个类似的菜单构建器，我目前遇到的唯一问题是菜单的顺序，但由于勤奋，我无法分享当前的脚本..

生成PHP / HTML内容，意思是：

  <li class="menu-item" data-id="1">Home</li>
  <li class="menu-item" data-id="2">About</li>
  <li class="menu-item" data-id="3">Contact</li>
  <li class="menu-item" data-id="4">Blog</li>
  <li class="menu-item" data-id="5">Misc</li>

我无法通过HTML / PHP重新订购，因为它在foreach中循环以从sql生成内容，data-id和parent-id也是生成的内容。

我需要重新订购，以便在不更改HTML / PHP的情况下将misc置于顶部。

请协助可以改变此可排序菜单或文档顺序的JavaScript，以引导我找到正确的方向。

通过jquery sort list based on data attribute value

解决

使用以下

$(".listitems.autosort").each(function(){
    $(this).html($(this).children('li').sort(function(a, b){
        return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
    }));
});

Answer 1

我认为你必须使用这样的问题jquery from last child to first 如果你不想使用服务器端渲染html。最后在js脚本中插入此代码。所以当html页面上传时，这个jquery操作会将你的最后一个“Misc”改为第一个位置。

$("#YOUR_PARENT_DIV_LI li:last-child").prependTo("#YOUR_PARENT_DIV_LI");

使用JS / JQ排序可排序菜单

1 个答案: