將獨特元素添加到具有相同類名的元素

Question

我遇到了一堆具有相同類名的<div>。我需要爲它們中的每一個附加獨特的數據，但它們只能由類定義。

例子：

<div class='test'></div> 
<div class='test'></div> 
<div class='test'></div> 
<div class='test'></div> 

有沒有一種方法，我可以滾動查看照片，並附加唯一的數據給他們使用jQuery的追加？

Answer 1

這裏把樣品你在哪裏方便的div有不同的價值，你可以修改它，因爲你需要

$(function(){ 
 
    var m=1; 
 
    $('.test').each(function(){ 
 
     $(this).html(m++); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class='test'></div> 
 
<div class='test'></div> 
 
<div class='test'></div> 
 
<div class='test'></div>

問候

Answer 2

沒有辦法判斷的差異對於這些元素，除了循環遍歷元素並使用索引值（因此，序數值）。喜歡的東西：

var nodelist = document.querySelectorAll('.test'); 
 

 
for (var i = 0; i < nodelist.length; i += 1) { 
 
    nodelist[i].textContent = 'element '+i; 
 
}

<div class='test'></div> 
 
<div class='test'></div> 
 
<div class='test'></div> 
 
<div class='test'></div>

Answer 3

使用jQuery html(fn)

var data = ['text #1','some other text','I am #3','Last <strong>one</strong>']; 

$('.test').html(function(i){ 
    return data[i]; 
}); 

或者，如果要添加或修改現有的內容簡單的辦法，第二個參數是內容

$('.test').html(function(i, existingHtml){ 
     return existingHtml + data[i]; 
    });  

DEMO