jQuery在li内迭代ul

Question

I'm using the following code to iterate the HTML element given below

<ul id="sortable">
<li>
<p> item 1</p>
<ul id="nested-sortable">
  <li>
     Sub item 1 
  </li>
  <li>
     Sub item 2
  </li>
  <li>
     Sub item 3 
  </li>
</ul>
</li>
<li>
<p> item 2</p>
</li>
</ul>

Javascript

var jsonSeqObj = {};
alert('hi');
$('ul#sortable li').each(function(index,pele) {
   alert($(pele).attr('id'));
   $(pele).children('ul#nested-sortable li').each(function(idx, chele) {
   alert(chele.attr('id'));
   jsonSeqObj.push({REF_ID:$(chele).attr('id') , NEW_SEQ_NO:idx });
});  
jsonSeqObj.push({REF_ID:$(pele).attr('id') , NEW_SEQ_NO:index });
});

li ul li is too long, line wraps but no indention

alert(jsonSeqObj);
return jsonSeqObj;

but the children thing is not working

ERROR : Object doesnt support this property.

Answer 1

Is your markup same as in the example? Or you have more than one nested-sortable ul-s? Maybe problem that you have duplicated IDs on the page (Id should be unique).

Answer 2

alert(chele.attr('id')); But chele here is DOM object (not jQuery), so it doesn't have attr method. That's why you are getting 'object doesn't support this prperty...'