jQuery: comment construire un tableau 2d?

Question

Je cette version simplifiée de ma page Web (son gâchis IRL):

<li id=section1 class=sortable_section> 
    <header> 
    <ul id=container1> 
     <li id=item1 class=sortable_item> 
     <li id=item2 class=sortable_item> 
    </container 
</section 

<li id=section2 class=sortable_section> 
    <header> 
    <ul id=container2> 
     <li id=item3 class=sortable_item> 
     <li id=item4 class=sortable_item> 
     <li id=item5 class=sortable_item> 
    </container> 
</section> 

Alors, je peux faire $j("container1").sortable('serialize') qui crée un tableau des ids de tous les contenant de li. donc j'obtiendrais ["item1", "item2"] pour container1.

Comment puis-je faire un tableau qui ressemble à ceci:

[ 
["section1", ["item1", "item2"]], 
["section2", ["item3", "item4", "item5"]] 
] 

C'est ce que Ive essayant: mais il ne fonctionne pas

 d = $j.makeArray(
     $j('.sortable_section').each(function(i){ 
      [$j(this).attr("id"), 
       $j.makeArray($j.map($j("#"+$j(this).attr("id")+" .sortable_item"), function(s,j){ 
        return ($j(s).attr("id")); 
       }))] 
     })); 

Mais il renvoie les objets entiers, plutôt que seulement les ids ....

EDIT: selon l'une des suggestions de réponses, ce qui est maintenant ce que j'ai

d = $j(".sections > li").map(function(index, element){ 
       return [$j(element).attr('id'), 
        $j("#"+$j(element).attr('id') + " .content").map(function(subindex, subelement){ 
         return $j(subelement).attr('id'); 
        }).toArray()]; 


      }).toArray(); 

mais je reçois cette erreur

TypeError: Result of expression near '...}).toArray()]...' [undefined] is not a function. 

Lorsque je alertes sur $j(element).attr('id') et $j(subelement).attr('id') je reçois les ids corrects

Answer 1

map fonction Utiliser jQuery:

$('#master-list > li').map(function(index, element) 
{ 
    return [$(element).attr('id'), 
     $(this).children('ul > li').map(function(subindex, subelement) 
     { 
      return $(subelement).attr('id'); 
     }).toArray()]; 
}).toArray(); 

Éditer:

Mon mauvais. Ce qui précède a été mis à jour avec les appels .toArray() appropriés.

Re-edit:

D'accord, c'est ce que je reçois pour le codage libre. Voici le script correct et testé avec le balisage que j'ai utilisé pour le tester. J'ai été incapable de reproduire votre erreur, mais elle peut être provoquée par un élément sans id ou peut-être avoir quelque chose à voir avec le changement de nom du symbole $ en $j.

<script type="text/javascript"> 
    $(function() { 
     var x = $('#master-list > li').map(function (index, element) { 
      return [[element.id, 
       $(element).find('li').map(function (subindex, subelement) { 
        return subelement.id; 
       }).toArray()]]; 
     }).toArray(); 
    }); 
</script> 

<ul id="master-list"> 
    <li id="section1" class="sortable_section"> 
     Header 
     <ul id="container1"> 
      <li id="item1" class="sortable_item">a</li> 
      <li id="item2" class="sortable_item">b</li> 
     </ul> 
    </li> 

    <li id="section2" class="sortable_section"> 
     Header 
     <ul id="container2"> 
      <li id="item3" class="sortable_item">a</li> 
      <li id="item4" class="sortable_item">b</li> 
      <li id="item5" class="sortable_item">c</li> 
     </ul> 
    </li> 
</ul> 

La raison de ce qui précède n'a pas fonctionné était un peu bizarrerie en ce qui concerne la fonction map jQuery: apparemment, si vous retournez un tableau de valeurs, il aplatit le tableau et renvoie toutes les valeurs. Donc, au lieu de [a, [b, c]], vous obtenez simplement [a, b, c]. Pour contourner cela, j'ai ajouté un ensemble de parenthèses supplémentaires de sorte que vous retourniez maintenant un tableau contenant un tableau, qui, lorsqu'il est aplati, est ce que vous voulez.

Pour votre information, vous n'avez pas besoin de le faire:

$('#' + $(element).attr('id') + ' .content') 

Vous pouvez obtenir le même effet dans le code plus lisible avec ceci:

$(element).find('.content'); 

Answer 2

Pouvez-vous utiliser

var serializedListItems = $("li").serializeArray();