Создать OBJ из содержания Div

Question

У меня есть следующий HTML структуру:

<div id="main"> 
    <div id="myDiv1"> 
    <ul> 
     <li>Abc</li> 
     <li>Def</li> 
    </ul> 
    </div> 
    <div id="myDiv2"> 
    <ul> 
     <li>Ghi</li> 
     <li>Jkl</li> 
    </ul> 
    </div> 
</div> 

теперь я хочу, чтобы извлечь какую-то информацию и поместить их в объект так:

var ob = { 
     'myDiv1' : [ "Abc", "Def"], 
     'myDiv2' : [ "Ghi", "Jkl"] 
    }; 

Мой подход был очень неудобно:

var obj = "{"; 

$('#main div').each(function() { 
    obj += "\"" + $(this).attr('id') + "\" : ["; 
    $(this).find('li').each(function() { 
    obj += "\"" + $(this).text() + "\", "; 
    }); 
    obj = obj.substring(0, obj.length - 2); 
    obj += "], "; 
}); 
obj = obj.substring(0, obj.length - 2); 
obj += "}"; 

obj = JSON.parse(obj); 
console.log(obj) 

В результате я получил массив, но не структуру, в которой я нуждаюсь.

Есть ли лучший способ создать структуру?

Позже, я хочу передать obj в качестве параметра в вызове Ajax.

Fiddle.

Answer 1

Вы можете сделать свой код намного проще, просто создав объект напрямую. Вы можете перебрать элементы div в пределах #main, а затем использовать map(), чтобы создать массив значений текста li, который содержит дочерний элемент div. Попробуйте это:

var obj = {}; 
$('#main div').each(function() { 
    obj[this.id] = $(this).find('li').map(function() { 
     return $(this).text(); 
    }).get() 
}); 

console.log(JSON.stringify(obj)); // = "{"myDiv1":["Abc","Def"],"myDiv2":["Ghi","Jkl"]}" 

Working example

Позже, я хочу передать OBJ в качестве параметра вызова Ajax.

отметить также, что вам не нужно, чтобы передать объект в формате JSON, чтобы сделать это - вы можете указать объект непосредственно к параметру запроса AJAX data и JQuery будет автоматически кодировать и stringify его для вас.