Как использовать JavaScript для назначения классов для div на последовательной основе?

0

Я попытался найти ответ, но без радости - я новичок в JS (как в начале обучения на прошлой неделе), и я столкнулся с проблемой, что даже не знаю, где искать, чтобы начать решение.

У меня есть div с container id, внутри которого div - множество маленьких div с item класса. Я хочу дать эти .item дополнительные классы tile1 для первого div, tile2 для второго, tile3 для третьего, tile4 для четвертого, а затем вернуться к tile1 для пятого, tile2 для шестого и т.д.

Количество .tile в #container будет динамически генерироваться, возможно, с помощью путевых точек с использованием бесконечного прокрутки, что заставляет меня хотеть использовать javascript для этого, а не вручную вводить эти классы.

Может ли кто-нибудь дать мне несколько указателей?

Благодарю!

  • 0
    Э-э ... почему? Псевдо-класс :nth-child(4n+1) получит первый, пятый, девятый ... Вы также можете сделать 4n+2 , 4n+3 и 4n .
Теги:

3 ответа

1
Лучший ответ

Вы можете использовать .addClass() и модуль:

$('#container .item').addClass(function(i) { 
    return 'tile' + (i % 4 + 1);
});

http://jsbin.com/evuFOqUd/3/edit

Или если вы не используете jQuery:

[].forEach.call(
  document.querySelectorAll('#container .item'), 
  function(el, i) {
    el.classList.add('tile' + (i % 4 + 1));
  }
);

Это работает только в современных браузерах.

Поделиться
  • 0
    Спасибо за точку.
  • 0
    @Cthulhu О, пожалуйста.
1

Здесь jsbin demo

jQuery .each - твой друг

$("#container .item").each(function(idx, elem) {
  $(elem).addClass("tile" + (idx + 1));
});

РЕДАКТИРОВАТЬ

Я не видел, чтобы вы хотели, чтобы номера плит были обернуты

$("#container .item").each(function(idx, elem) {
  $(elem).addClass("tile" + (idx % 4 + 1));
});
Поделиться
  • 0
    Огромное спасибо. Несмотря на то, что я вижу, как он работает в вашем JSbin, по какой-то причине он не будет работать для меня в моем собственном коде - возможно, из-за моей неопытности. Я попытался поместить $ (document) .ready (function () {[ваш код])} и все еще не повезло.
  • 0
    @ Уилф, не уверен, что тебе там сказать. У вас могут быть другие ошибки JavaScript на странице? Возможно, опубликуйте другой вопрос, как только определите проблему.
0

Не-jQuery-подход (pardon the pseudo-code):

var breakAfter = 4; // Reset iterator after reaching 5 runs
var iterator = 0;
var elementList = document.querySelector(".myk00lElementClass"); // Your DOM nodes
for (element in elementList) { 

    element.classList.add('dynamicClass_' + iterator);

    // Reset dynamic class number if we have reached arbitrary length above
    if (iterator >= breakAfter) {
        iterator = 0;

    // Or, keep on truckin'
    } else {
        iterator++;
    }
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню