Question

我的情况是，有一堆<div>具有相同的类名。我需要将唯一数据附加到它们中的每一个，但它们仅由类定义。

示例：

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

有没有办法可以滚动浏览它们并使用JQuery的附加功能向它们添加唯一数据？

Answer 1

除了循环遍历元素并使用索引值（因此，序数值）之外，无法确定这些元素的差异。类似的东西：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

这里为您提供了一个示例，其中easy 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>

此致

将唯一元素附加到具有相同类名的元素

3 个答案: