使用 jquery 将多个列表元素的名称聚合到一个数组中

Question

我有一些列表允许使用 sortable.js 重新排列，我需要在拖动完成时创建排序顺序的数组。 HTML如下：

<div id="catscontainer">
    <div id="parentcat1" class="parentcatcontainer">
    <h4 class="parentcathead">Parent Category One</h4>
    <ul class="subcatlist" id="ul-parentcat1">
        <li id="parentcat1-subcat1">Sub Category One</li>
        <li id="parentcat1-subcat2">Sub Category Two</li>
        <li id="parentcat1-subcat3">Sub Category Three</li>
    </ul>
    </div>
    <div id="parentcat2" class="parentcatcontainer">
    <h4 class="parentcathead">Parent Category Two</h4>
    <ul class="subcatlist" id="ul-parentcat2">
        <li id="parentcat2-subcat1">Sub Category One</li>
        <li id="parentcat2-subcat2">Sub Category Two</li>
        <li id="parentcat2-subcat3">Sub Category Three</li>
    </ul>
    </div>
</div>

我一直在使用以下可排序代码：

var sortySubCats = Sortable.create(el, {
    group: 'titles',
    animation: 150,
    dataIdAttr: 'id',
    onUpdate: function( /**Event*/ evt) {
        var orderListSub = sortySubCats.toArray();
    }
}

这导致了一个数组，orderListSub，它只输出刚刚与之交互的父类别中的项目列表。这很好，但不符合我的目的。在 mySQL 中，我存储了整个层次结构数组的序列化版本。这个问题的结构是多余的，但我确实需要在每次拖动完成后按顺序输出以下内容：

Parent Category ID
> Sub Category ID
> Sub Category ID
> Sub Category ID
Parent Category ID
> Sub Category ID
> Sub Category ID
> Sub Category ID
etc...

到我可以序列化的数组中。目前我正在考虑遍历 catscontainer div 的每个 UL 以获取 id 名称，并在其中进行子迭代以获取 LI id 名称。这应该 return 他们按顺序排列。通过 jquery 是否有一种特别干净的方法，或者 sortable 实际上比我经历过的更好地实现了这个功能？

更新：

我已经使用以下简单的 jquery 来捕获列表的父元素和子元素的 ID，顺序与它们在拖动后的外观相匹配。似乎是最直接的方法，我可以添加更多代码将其变成我需要的数组。如果没有更好的建议，我会添加这个作为答案。

function catsToArrayJSON() { // called after drag complete
    $("#catscontainer ul").each(function () {
        console.log('Parent is: ' + this.id);
        $(this).children("li").each(function () {
            console.log('Child is: ' + this.id);
        })
    });
}

Answer 1

我已经使用以下简单的 jquery 来捕获列表的父元素和子元素的 ID，顺序与它们在拖动后的外观相匹配。似乎是最直接的方法，我可以添加更多代码将其变成我需要的数组。

function catsToArrayJSON() { // called after drag complete
    $("#catscontainer ul").each(function () {
        console.log('Parent is: ' + this.id);
        $(this).children("li").each(function () {
            console.log('Child is: ' + this.id);
        })
    });
}

使用 jquery 将多个列表元素的名称聚合到一个数组中

Aggregating names of multiple list elements into a single array with jquery

html

javascript

jquery

jquery-ui-sortable