Добавление уникальных элементов в элементы с тем же именем класса

Question

У меня есть ситуация, когда есть группа <div> с тем же именем класса. Мне нужно добавлять уникальные данные к каждому из них, но они определяются только классом.

Пример:

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

Есть ли способ я могу пролистать их и добавлять уникальные данные на них с помощью Append Jquery в?

Answer 1

здесь помещается образец для вас, где легко ДИВ имеют отдельное значение вы можете изменить его, как вам нужно

$(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