3

次のオブジェクトを生成したいと思います。

var ideaBoard = {
     "Staff Retreat" : {
         "Games" : [
             {"title" : "Rockband", "details" : "1hr"},
             {"title" : "Texas Hold em", "details" : "30min"}
         ],
         "Talks" : [
             {"title" : "The Old You", "details" : "Dr. Smith"}
         ]
     }
}

次の HTML から:

<div id="data">
    <ul><span class="board-title">Staff Retreat</span>
        <li><span class="category-title">Games</span>
            <ul>
                <li>
                    <span class="title">Rockband</span>
                    <span class="details">1hr</span>
                </li>
                <li>
                    <span class="title">Texas Hold em</span>
                    <span class="details">30min</span>
                </li>
            </ul>
        </li>
        <li><span class="category-title">Talks</span>
            <ul>
                <li>
                    <span class="title">The Old You</span>
                    <span class="details">Dr. Smith</span>
                </li>
            </ul>
        </li>
    </ul>
</div>

私はループ/配列/オブジェクトが初めてなので、助けてくれて本当に感謝しています!

このプロジェクトの他の場所で jQuery を使用しています。

ありがとう！

4

3 に答える 3

2

複数の方法があります。ここに1つがあります：

var ideaBoard = {}
$('#data > ul').each(function() {
   var data = {}, // board data
       title = $(this).find('.board-title').text(); // board title

   // find categories
   $(this).find('> li > .category-title').each(function() {
        var category = $(this).text(), // category title

        // we can use map to create the array
        var category_data = $(this).next().children('li').map(function() {
            var tdata = {};

            // each span contains detailed data
            $(this).children('span').each(function() {
                tdata[this.className] = $(this).text();
            });

            return tdata;
        }).get();

        data[category] = category_data;
   });

  ideaBoard[title] = data;
});

デモ

HTML の構造を変更すると、これが壊れる可能性が高くなります。このようなデータが大量にある場合、このコードも非常に遅くなる可能性があります。

使用されるメソッドについては、jQuery のドキュメントを参照してください。

于 2011-07-06T06:59:02.617 に答える
0

HTMLをどのように生成していますか？PHPを使用している場合は、後でHTMLから変数を読み取ろうとするのではなく、変数をJSに渡すことができます。たとえば、配列にそれらがある場合、PHPでjson_encodeを使用し、それをページ内の変数内にエコーすることができます= jQuery.parseJSON（here）;

これができず、本当にHTMLから読み取りたい場合は、最初に$（'＃data'）を使用してIDデータを選択し、その子（）を取得する必要があります。次に、子に.each（）を使用します。次に、子をオブジェクトに配置し、その各children（）を.each（）でチェックして、オブジェクトに追加します。これらのレベル以上のものがある場合は、このために再帰関数を実行することをお勧めします。

PS：スパンをULとLIの間に置くのに適切なHTMLだとは思いません。

于 2011-07-06T07:25:47.430 に答える
0

最適化されていませんが、機能します：

var result = {};
var node1;
var node2;
var node3;
var tmpObj = {};
$('#data > ul').each(function() {
    node1 = $(this);
    result[node1.find('.board-title').text()] = {};
    node1.find('.category-title').each(function() {
        node2 = $(this);
        result[node1.find('.board-title').text()][node2.text()] = [];
        node2.next('ul').children('li').each(function() {
            node3 = $(this);
            tmpObj = {};
            node3.children('span').each(function() {
                tmpObj[$(this).attr('class')] = $(this).text();
            });
            result[node1.find('.board-title').text()][node2.text()].push(tmpObj);
        })
    });
});
console.log(result);
于 2011-07-06T06:57:46.350 に答える