1

each 関数を使用して、変数データ内のテキスト値の数に応じて、DOM でリスト項目を複製し、複数回追加しようとしています。問題は、すべての新しいリスト項目が同じテキスト値を取得することです (すべてのリスト項目は、最後に追加されたリスト項目と等しく設定されます)。エンクロージャーと関係があると思いますが、わかりません。

誰が問題が何であるかを説明できますか?

ありがとう！

データ：

    var data = {"text1": ["text1_row1", "text1_row2"], "text2": ["text2_row1", "text2_row2"], "text3": ["text3_row1", "text3_row2"] }

HTML:

    <ul>
        <li id="entryTemplate" style="display:none">
            <span class="text1"></span>
            <span class="text2"></span>
            <span class="text3"></span>
        </li>
    </ul>

Javascript:

function listData(data){
    $.each(data.text1, function(i) {
        var newDataRow = $('#entryTemplate').clone();   
        newDataRow.removeAttr('id')
             .removeAttr('style')
             .removeAttr('class')
             .addClass('copy')
             .appendTo('ul')
             .find('.text1').text(data.text1[i])
             .find('.text2').text(data.text2[i])
             .find('.text3').text(data.text3[i]);
    });
}

$.fn.clone = function(){
    var ret = $();
    this.each(function(){
        ret.push(this.cloneNode(true))
    });
    return ret;
};

必要な HTML:

    <ul>
        <li id="entryTemplate" style="display:none">
            <span class="text1"></span>
            <span class="text2"></span>
            <span class="text3"></span>
        </li>
        <li class="copy">
            <span class="text1">text1_row1</span>
            <span class="text2">text2_row1</span>
            <span class="text3">text3_row1</span>
        </li>
        <li class="copy">
            <span class="text1">text1_row2</span>
            <span class="text2">text2_row2</span>
            <span class="text3">text3_row2</span>
        </li>

    </ul>

私が得た結果（すべてのliアイテムがrow2のテキストを取得します）：

    <ul>
        <li id="entryTemplate" style="display:none">
            <span class="text1"></span>
            <span class="text2"></span>
            <span class="text3"></span>
        </li>
        <li class="copy">
            <span class="text1">text1_row2</span>
            <span class="text2">text2_row2</span>
            <span class="text3">text3_row2</span>
        </li>
        <li class="copy">
            <span class="text1">text1_row2</span>
            <span class="text2">text2_row2</span>
            <span class="text3">text3_row2</span>
        </li>

    </ul>
4

2 に答える 2

0

Your question is a bit foggy and it's not really clear what's the result you're looking for. Appart from that I saw something in your code that's probably causing it. Give it a try and let me know what happened.

When you do

$.each(data.text1, function(i) {

change it to

$.each(data.text1, function(pos, element) {

and replace your [ i ] for [element].

According to JQuery API, when doing an EACH loop, the 1st return is the position in the array and the second is the value itself.

于 2013-03-19T01:03:26.510 に答える
0

更新された回答:

データ オブジェクト変数の形式が間違っています...データ オブジェクトの各値を配列にしたいようです (中括弧を使用すると、キーを使用してオブジェクトを定義していることを意味します)、角括弧を使用する必要があります[]。配列と配列のようなオブジェクトを参照してください

var data = {
    "text1": ["text1_row1", "text1_row2"],
    "text2": ["text2_row1", "text2_row2"],
    "text3": ["text3_row1", "text3_row2"]
}

jQuery には既にclone メソッドがあるため、独自のメソッドでオーバーライドする必要はありません。

提供したデータに基づいて、data変数自体ではなく、変数自体を反復処理する必要がありますdata.text1。次に、現在のインデックス (これは に渡される 2 番目のパラメーター) の値によってテキスト値を取得し.each()、参照[0]し[1]て実際のテキストを取得できます。

$.each(data,function(i,value){
  console.log(value);
  var newDataRow = $("#entryTemplate").clone();
  newDataRow
  .removeAttr('id')
  .removeAttr('style')
  .removeAttr('class')
  .addClass('copy')
  .appendTo('ul');
  newDataRow.children('.text1').text(value[0]); // value[0] == data[i][0]
  newDataRow.children('.text2').text(value[1]);
});
于 2013-03-19T01:22:36.583 に答える