Блог

Главная - Вопросы по программированию - Применять каждое значение массива к одному элементу, пока не будет достигнут конец массива?

Применять каждое значение массива к одному элементу, пока не будет достигнут конец массива?

#javascript

#javascript

Вопрос:

Мне нужно динамически добавлять значения из массива в пользовательский атрибут данных в некоторых элементах html. Например, допустим, у меня есть 12 элементов «.point», мне нужно применить один из месяцев по порядку к каждому из этих элементов. Я пробовал несколько способов, но я не думаю, что моя логика здесь верна. Я включил свою последнюю попытку ниже, это приводит только к тому, что «Dec» применяется к двенадцати элементам «.point».

JS /jQuery

 var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var monthsLength = months.length;
for (var i = 0; i < monthsLength; i  ) {
    $('.point').attr('data-date', months[i]);
}

Ответ №1:

Объекты jQuery похожи на массивы, поэтому вы можете захватить соответствующие .point элементы одним $(".point") вызовом, а затем индексировать в него; когда вы индексируете в объект jQuery, вы получаете необработанную запись (обычно элемент DOM) с этим индексом. Вот версия уровня ES5:

 var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var monthsLength = months.length;
var points = $('.point');
for (var i = 0; i < monthsLength; i  ) {
    var point = points[i];
    if (!point) {
        break; // Ran out of elements
    }
    point.setAttribute("data-date", months[i]);
}

В качестве альтернативы, мы можем управлять этим через $(".point").attr , у которого есть возможность вызвать обратный вызов:

 var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$(".point").attr("data-date", function(i) {
    var month = months[i];
    return month;
});

Обратите внимание, что функция получает индекс переданного ей элемента в качестве своего первого аргумента.

Нам не нужно проверять months[i] , возвращена ли строка, потому что, если мы выйдем за пределы конца массива, month будет undefined , и attr функция не изменяет значение атрибута элемента, если функция возвращает undefined .

Комментарии:

1. Это отлично работает! Спасибо за ваш ответ. Что, если я хочу сделать это несколько раз с несколькими наборами из 12 «.points»?

2. Как он должен вести себя для нескольких наборов? Что, если какой-то набор содержит более или менее 12 элементов?

3. @grahamfk45c — Это зависит от того, что вы подразумеваете под несколькими наборами из 12 «.points», но это может включать вложенные циклы.

4. @KrzysztofSafjanowski — В вопросе ничего не говорилось о нескольких наборах (только комментарий выше). Если в наборе меньше или больше 12 элементов, все в порядке. Меньше просто означает, что используются не все месяцы; больше средств i проходит мимо конца months массива, и применяется примечание в ответе (в основном, те, которые имеют индексы 12 и далее, не будут иметь никаких изменений в своем атрибуте).

Ответ №2:

в вашем текущем коде вы всегда выбираете все 12 точек в каждом цикле. попробуйте использовать селектор эквалайзера при выборе каждой точки в цикле.

 for (var i = 0; i < monthsLength; i  ) {
  $('.point').eq(i).attr('data-date', months[i]);
}