Блог

Главная - Вопросы по программированию - Каков наилучший способ присвоения атрибутов по их индексу

Каков наилучший способ присвоения атрибутов по их индексу

#javascript #jquery #attributes #attr

#javascript #jquery #атрибуты #attr

Вопрос:

У меня есть оболочка, в которой есть дочерние элементы, которым нужны определенные позиции.

Допустим, у меня есть такая разметка:

 <div class="wrapper">
    <div class="slider" data-position=""></div>
    <div class="slider" data-position=""></div>
    <div class="slider" data-position=""></div>
</div>

У последнего дочернего элемента должна быть позиция infront , у второго последнего дочернего элемента должна быть позиция behind, а у каждого другого ползунка должна быть позиция limbo.

ДЕМОНСТРАЦИЯ: http://jsfiddle.net/L5Lpp/1 /

Я действительно не поклонник массивной цепочки операторов if и else….

Есть ли лучший, более элегантный способ добиться этого?

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

1. Примечание: вместо currentItem.attr('data-position', 'behind'); do currentItem.data('position', 'behind'); .

Ответ №1:

Вы можете получить индекс элемента относительно последнего элемента и вычислить позицию по нему:

 var index = currentItem.index() - sliders.length;
currentItem.attr('data-position',
    index == -1 ? 'infront' :
    index == -2 ? 'behind' :
    'limbo'
);

Демонстрация: http://jsfiddle.net/L5Lpp/2 /

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

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

Ответ №2:

Попробуйте это:

 var sliders = $("div.slider").data("position", "limbo");
sliders.last().data("position", "infront");
sliders.eq(-2).data("position", "behind");

РЕДАКТИРОВАТЬ: использование классов:

 var sliders = $("div.slider").removeClass("limbo infront behind");
sliders.last().addClass("infront");
sliders.eq(-2).addClass("behind");
sliders.slice(0, -2).addClass("limbo");

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

1. Это работает, и вы знаете, что, конечно, очень похожая идея пришла мне в голову сразу после публикации этого… ха-ха, спасибо, я буду придерживаться команды attr, потому что мне нужны значения, видимые для css 🙂

2. Я бы подумал, что попытка выбрать что-то с помощью eq(-2), если оно не существует, выдаст ошибку, но нет, хорошая работа jquery. лол

3. Означает ли это, что вы делаете что-то подобное [data-position=infront] { ... } в своем CSS? Вместо этого используйте классы.

4. jQuery никогда не будет использовать допустимые селекторы, помните, что он работает с наборами, поэтому все, что не существует, просто дает вам пустой набор. Это одна из основных причин, по которой он намного более дружелюбен, чем чистый DOM.

5. @christian314159, если я использую классы, то мне придется удалить текущие классы перед их добавлением, а также убедиться, что я сохраняю свой класс slider, здесь удобно использовать альтернативный атрибут.