Namen mehrerer Listenelemente in einem einzigen Array mit jquery zusammenfassen

Question

Ich habe einige Listen, die ich mit sortable.js neu anordnen kann, und ich muss ein Array der Sortierreihenfolge beim Ziehen Abschluss erstellen. Der HTML-Code ist wie folgt:

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

Ich hatte den folgenden sortierbar Code unter Verwendung von:

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

, die zu einem Array geführt, orderListSub, dass nur gibt eine Liste der Elemente in der übergeordneten Kategorie nur interagiert mit. Das ist gut, aber nicht für meine Zwecke. In mySQL speichere ich eine serialisierte Version eines Arrays der gesamten Hierarchie. Die Struktur ist für diese Frage überflüssig, aber ich brauche die folgend, um nach Beendigung des drag zur Ausgabe:

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

in eine Anordnung, die ich serialise kann. Derzeit versuche ich, durch jede UL des catscontainer-div für ID-Namen zu iterieren und innerhalb dieses für LI-ID-Namen zu iterieren. Dies sollte sie in Ordnung bringen. Gibt es einen besonders sauberen Weg, dies durch jQuery zu tun, oder ist diese Funktionalität tatsächlich besser implementiert als ich es erlebt habe?

---

Update:

Ich habe mit dem folgenden einfachen jquery gegangen, um die IDs der Eltern-Kind-Elemente der Liste in der Reihenfolge zu erfassen, die ihr Aussehen passt nach dem Ziehen. Scheint der direkteste Weg zu sein und ich kann noch mehr Code hinzufügen, um es in das Array zu verwandeln, das ich brauche. Ich füge das als Antwort hinzu, wenn es keine besseren Vorschläge gibt.

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

Ich habe mit dem folgenden einfachen jquery gegangen, um die IDs der Eltern-Kind-Elemente der Liste in der Reihenfolge zu erfassen, die ihr Aussehen passt nach dem Ziehen. Scheint der direkteste Weg zu sein und ich kann noch mehr Code hinzufügen, um es in das Array zu verwandeln, das ich brauche.

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