如何遍歷元素並使用索引號來呈現相對數組對象的屬性？

我已經創建了一些帶有一些虛擬屬性的數組對象，我也已經動態創建了一些我想附加點擊處理程序的列表項。當點擊一個列表項時，我想使用設置的模板在#container中顯示適當的數據。我假設我可以使用for循環的動態列表項的索引，以及如何使用它來顯示正確的對象屬性？如果你能告訴我我哪裏出了問題，那很好，對不起，但我已經迷失了方向。如何遍歷元素並使用索引號來呈現相對數組對象的屬性？

$(document).ready(function() { 

    var data = [ 

    { 
     name: 'kyle', 
     age: 23, 
     sex: 'male' 
    }, { 
     name: 'james', 
     age: 19, 
     sex: 'male' 
    }, { 
     name: 'catrina', 
     age: 28, 
     sex: 'female' 
    }]; 

    var template = $('#template').html(); 

    // Links created dynamically 
    for (var i = 0; i < 3; i++) { 
     var link = '<li>Link ' + i + '</li>'; 
     $('#links').append(link); 
    } 

    // When li is clicked show related data properties, li[0] = data[0], li[1] = data[1] ... 
    $('li', '#links').live('click', function (e) { 
     $.each(data, function (index, value) { 
      $('#container').append(data.name[i], data.age[i], data.sex[i]); 
     }); 

     $('#container').html(data); 
    }); 

});

代碼可以在這裏找到http://jsbin.com/otirax/6/edit

來源

2012-03-12 styler

最簡單的事情是，當你創建一個包含索引數據項添加到每個環節。然後，您可以在以後獲取該指數在點擊：

for(var i = 0; i < 3; i++){ 
    var link = '<li data-index="' + i + '">Link ' + i + '</li>'; 
    $('#links').append(link); 
}

然後，在你的點擊處理程序，您可以檢索值：

$('li', '#links').live('click', function(e){ 
    // retrieve index 
    var index = $(this).data("index"); 
    // retrieve piece of data for this link 
    var thisData = data[index]; 
    // do whatever you need to with the data for this link here 
    // thisData.name 
    // thisData.age 
    // thisData.sex 
});

存儲，然後檢索索引的這種方式提供了一個永久索引在您創建時每個li上設置的值。如果您永遠不會重新訂購li標籤，並且它們是該級別的唯一對象，您可以通過使用.index() jQuery method來簡化它，它可以在需要時動態計算給定的li標籤的索引，只需計算在它之前有多少同胞：

// Links created dynamically 
for (var i = 0; i < 3; i++) { 
    var link = '<li>Link ' + i + '</li>'; 
    $('#links').append(link); 
} 

$('li', '#links').live('click', function(e){ 
    // retrieve index 
    var index = $(this).index(); 
    // retrieve piece of data for this link 
    var thisData = data[index]; 
    // do whatever you need to with the data for this link here 
});

僅供參考，.live()已被棄用，應使用.on() jQuery的1.7+或.delegate()早期版本的jQuery。

你.live()代碼將是這與.on()：

$('#links').on('click', 'li', function(e){

來源

2012-03-12 22:50:49 jfriend00

感謝這個，有困難IM結合來自data-attribute的新索引號與要輸出屬性的對象。你能告訴我哪裏出錯了：$（'＃links'）。on（'click'，'li'，function（e）{var。 $ .each（data，function（idx，obj）{var age = template.replace（/ name/ig，obj [index] .name） .replace（/ age/ig，obj [index]。年齡） .replace（/ sex/ig，obj [index] .sex）; $（'＃container'）。html（temp）; }）; – styler 2012-03-12 23:41:26

@Styler - 查看我的最新編輯 – jfriend00 2012-03-12 23:53:19

@Styler - 假設你只想從'data'數組中的一個項目，你不想使用'.each（）'，你只想使用'data [index]'。將來，你不能真的把多行代碼放在註釋中，所以最好將它添加到你的問題中，並將其格式化爲代碼然後引用它從評論。 – jfriend00 2012-03-13 00:32:58

這部分有兩個錯誤：

$.each(data, function (index, value) { 
    $('#container').append(data.name[i], data.age[i], data.sex[i]); 
});

第一個，如果你想通過index你應該訪問的數據的元素有：

data[index].name

T他第二個，你不需要因爲你已經有這個數組的元素value，所以：

$("#container").append(value.name, value.age, value.sex);

不過，我不認爲這是你想要的。即使有了這個修復，你的代碼也會添加到「#container」的所有data中的值 - 因爲你在做什麼。你對瀏覽器說：「當你點擊這些元素，列出我所有的數據值，並將它們添加到#container」。

我覺得你真正需要的是這樣的事情：用

$('li', '#links').live('click', function(e){ 
    var index = $(this).index(), value = data[index]; 
    $("#container").append(value.name, value.age, value.sex); 
});

注意，在jQuery中，你還可以將數據添加到元素data：http://api.jquery.com/data/

來源

2012-03-12 23:14:57 ZER0

如何遍歷元素並使用索引號來呈現相對數組對象的屬性？

回答

相關問題