jqueryを使って複数のリスト要素の名前を1つの配列に集約する

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> 

私は、次のソート可能なコードを使用していた

：だけは、親カテゴリ内の項目のリストを出力する配列、orderListSubにつながっ

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

、ちょうどと対話した。これは問題ありませんが、私の目的に合っていません。 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... 

。現在、私はID名のcatscontainer divの各ULを反復し、LI ID名のためにこれをサブ反復することを検討しています。これは順番にそれらを返すべきです。 jqueryを通してそうすることの特にクリーンな方法がありますか、またはソート可能なのは実際に私が経験したよりもこの機能をよりよく実装していますか？

---

アップデート：私はドラッグした後、その外観にマッチするためには、リストの親と子要素のidを捕捉するために、以下の簡単なjQueryを使って行ってきた

。最も単純な方法であると思われ、必要な配列に変換するコードを追加できます。良い提案がない場合は、これを答えとして追加します。

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

私はドラッグした後、その外観にマッチするためには、リストの親と子要素のidをキャプチャするために、以下の簡単なjQueryを使って行ってきました。最も単純な方法であると思われ、必要な配列に変換するコードを追加できます。

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