Изменить классы элементов списка

Question

Я хочу изменить класс каждого элемента списка (#list) на соответствующий в Array.У меня есть список, который выглядит следующим образом:

<ul id="list">
    <li>Banana</li>
    <li>Apple</li>
    <li>Pear</li>
    <li>Strawberry</li>
    <li>Lemon</li>
</ul>

И у меня есть этот массив:

["ban", "appl", "per", "straw", "lemn"]

Я хочу, чтобы jQuery .addClass() функция длязамените каждый элемент на class в том же порядке, в каком он указан на Array.Чтобы привести к этому:

<ul id="list">
    <li class="ban">Banana</li>
    <li class="appl">Apple</li>
    <li class="per">Pear</li>
    <li class="straw">Strawberry</li>
    <li class="lemn">Lemon</li>
</ul>

Как я могу это сделать?

Answer 1

Это должно работать для вас:

var classes = ["ban", "appl", "per", "straw", "lemn"];

$('#list > li').addClass(function(index) {
  return classes[index];
});

Вы можете увидеть документацию по этой перегрузке (ту, которая принимает function(index, currentClass) обратный вызов) на веб-сайте jQuery..

Answer 2

var myArray = ["ban", "appl", "per", "straw", "lemn"];
$("#list > li").each(function(index) {
    $(this).addClass(myArray[index]);
});

Answer 3

$('#list > li').each(function(i){
    $(this).addClass( myArray[i] );
});

Answer 4

$.each(myArray, function(i, value){
        $('#list li').eq(i).addClass(value);
    }
);