Добавить идентификатор к каждому элементу на основе количества в JQuery

Question

<div class="tile_nav"> 
<ul> 
<li><span class="ullevel2"><span>Sample text</span></span></li> 
<li><span class="ullevel2"><span>Sample text</span></span></li> 
<li><span class="ullevel2"><span>Sample text</span></span></li> 
<li><span class="ullevel2"><span>Sample text</span></span></li>   
</ul> 
</div> 


I have used 

$(".tile_nav .ullevel2 span").attr('id', function(index) { 
return "testDiv" + ($(this).index() + 1); 
}); 

Как добавить идентификатор к каждому элементу на основе длины по jQuery при загрузке страницы?

Answer 1

Вы можете использовать:

$('.span_group span').attr('id', function(idx){ 
    return 'span'+ idx; 
}); 

Answer 2

перебрать все элемента и добавить идентификатор к каждому

$(".span_group").children().each(function(index){ 
 
    this.id = "span"+(index+1); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="span_group"> 
 
<span>1</span> 
 
<span>2</span> 
 
<span>3</span> 
 
<span>4</span> 
 
<span>5</span> 
 
</div>

Answer 3

Селектор здесь $('.span_group span') возвращает коллекцию имен тегов из span в родительском блок .span_group, поэтому вам просто нужно установить атрибут на промежутки внутри .span_group.

В .attr() мы можем использовать функцию в качестве второго параметра для возврата значения.

$(function() { 
 
    $('.span_group span').attr('id', function() { 
 
    return 'span' + ($(this).index()+1); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="span_group"> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
    <span>5</span> 
 
</div>

Answer 4

Использование:

$(".span_group span").each(function(index){ 
    $(this).attr("id","span"+$(this).text()); 
}); 

Смотрите скрипку: "http://jsfiddle.net/sraq9qj9/"

Объяснение: Это будет перебирать каждого span элемента, имеющий класс .span_group и назначит id к нему с использованием attr('id',someValue). Здесь someValue - это текст самого span, так как $this ссылается на текущий элемент элемента (в этом случае пробел).