5

現在、私のJQueryスクリプトには、ハードコードされた配列があります。

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

その配列をスクリプトにハードコーディングする代わりに、システムから生成されたHTMLの順序付けされていないリストのセットから動的に配列を作成する必要があるため、マークアップは次のようになります。

<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>

等....

私は必要だろう：

var arrayList = new Array（作成済み）

新しい配列オブジェクトが作成され、出力がテキスト文字列として表示されないようにするには、どうすればよいですか？

4

2 に答える 2

5

まず、柔軟性を高めるために、リスト アイテムのキーをdata属性に格納するようにマークアップを変更することをお勧めします。

<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>

そこから、map()を使用してオブジェクトを構築できます。

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

この fiddleで結果を確認できます。

于 2011-08-12T09:36:46.903 に答える
2

これを試して。

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連想オブジェクトの配列を保持し、その配列DTOのJSON文字列を保持します。
必要なものを選択してください。

デモ： http： //jsfiddle.net/naveen/yA54G/

PS： JSONをサポートしていないブラウザーの場合はjson2.jsへの参照を追加してください（JSON.stringifyを使用している場合）

于 2011-08-12T09:13:13.553 に答える