Есть ли способ обнаружить элементы внутри родительского элемента?

Question

Я хотел бы обнаружить все элементы внутри родительского элемента и все же проверить, есть ли у дочерних элементов дочерние элементы, и также обнаружить их.

Например:

<div id="first">
     <div id='second1'></div>
     <div id='second2'>
          <div id='third1'></div>
          <div id='third2'>
               <div id='fourth1'></div>
               <div id='fourth2'></div>
          </div>
          <div id='third3'></div>
     </div>
     <div id='second3'></div>
     <div id='second4'></div>
</div>

Я хочу узнать список всех идентификаторов внутри #first и проверить каждый дочерний элемент, если у него есть дочерний элемент, и продолжать его до тех пор, пока у меня не будет полного списка всех элементов.

Я хочу этот список в массиве вроде этого шаблона

array (
"body"=> {
           "first" => "second1", "second2" .............
         }
);

Answer 1

Попробуйте:

$("#first *")

Вы можете использовать метод children, чтобы получить детей

$("#first").children()

Добавьте некоторую рекурсию

function recursion ( elem, arr )
{
   var id = $(elem).attr('id');
   if ( id )
   {
     var children = arr[ id  ] = {};
     $(elem).children().each( function(){ recursion(this, children ) });
   }
}

var elements = {};
recursion ( $("#first"), elements );
console.log ( JSON.stringify( elements ) );

, и вы получите

 {"first":{"second1":{},"second2":{"third1":{},"third2":{"fourth1":{},"fourth2":{}},"third3":{}},"second3":{},"second4":{}}}

http://jsbin.com/udaje4/edit

Answer 2

Другой подход будет:

var childrens = {};
$('#first').children().each(function() {
    id = $(this).attr('id');

    if($('#'+id).children().size() > 0) {
        $('#'+id).children().each(function() {
            childrens[id] = {}
            childrens[id][$(this).attr('id')] = {};
        });
    } else childrens[$(this).attr('id')] = {};
});

alert(JSON.stringify(childrens));