benim JQuery komut

Question

Şu HTML sırasız listeden JQuery ilişkisel dizi yapmak nasıl zor kodlanmış dizi var:

var arrayList = [ 
    {"id":"1","category":"foo1","title":"bar1","image":"images/foobar1.gif"}, 
    {"id":"2","category":"foo2","title":"bar2","image":"images/foobar2.gif"}, 
    etc.... 
]; 

yerine o dizi sert benim komut kodlanmış olan Dinamik o oluşturmanız gerekir sistemden oluşturulan HTML sırasız listeleri kümesinden böylece biçimlendirme olacaktır:

<ul> 
    <li>1</li> 
    <li>foo1</li> 
    <li>bar1</li> 
    <li>images/foobar1.gif</li> 
</ul> 

<ul> 
    <li>2</li> 
    <li>foo2</li> 
    <li>bar2</li> 
    <li>images/foobar2.gif</li> 
</ul> 

vs ....

ihtiyacım olur

:

var arrayList = new Array (yani yaratılmış olan)

Nasıl yeni dizi nesne oluşturulur ve bu sadece bir metin dizesi olarak çıktı görmez böylece bunu yapabilirim?

Answer 1

Bunu deneyin.

var items = []; 
$("ul").each(function(){ 
    var item = {}; 
    var lis = $(this).find("li"); 
    item.id = lis.get(0).innerHTML; 
    item.category = lis.get(1).innerHTML; 
    item.title = lis.get(2).innerHTML; 
    item.image = lis.get(3).innerHTML; 
    items.push(item); 
}); 

var DTO = JSON.stringify(items); 

items senin ilişkisel nesnelerin dizi yapacak ve DTO o dizinin JSON dizesi düzenleyecek.
İhtiyacınız olanı seçin.

Demo: http://jsfiddle.net/naveen/yA54G/

PS: (Eğer JSON.stringify kullanıyorsanız) JSON desteği olmayan tarayıcılar için json2.js referans ekleyiniz

Answer 2

Birincisi, daha fazla esneklik için, ben öneririm değiştirmek İşaretlemeniz data özniteliklerde liste öğesi anahtarlarını saklamak için: Oradan

<ul> 
    <li data-key="id">1</li> 
    <li data-key="category">foo1</li> 
    <li data-key="title">bar1</li> 
    <li data-key="image">images/foobar1.gif</li> 
</ul> 

<ul> 
    <li data-key="id">2</li> 
    <li data-key="category">foo2</li> 
    <li data-key="title">bar2</li> 
    <li data-key="image">images/foobar2.gif</li> 
</ul> 

, kendi nesneleri oluşturmak için map() kullanabilirsiniz:

var arrayList = $("ul").map(function() { 
    var obj = {}; 
    $("li", this).each(function() { 
     var $this = $(this); 
     obj[$this.data("key")] = $this.text(); 
    }); 
    return obj; 
}).get(); 

Sonuçları this fiddle'da görebilirsiniz.