Question

我有一个有孩子的包装器，它们都需要特定的位置。

假设我有一个这样的标记：

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

最后一个孩子应该有一个位置，最后一个孩子应该有一个位置，而其他每个滑块都应该有一个不稳定的位置。

DEMO：http://jsfiddle.net/L5Lpp/1/

我真的不喜欢大量的if和else语句链......

有没有更优雅的方法来实现这一目标？

Answer 1

您可以获取项目相对于最后一项的索引，并从中计算位置：

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

演示：http://jsfiddle.net/L5Lpp/2/

Answer 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");

什么是通过索引分配属性的最佳方式

2 个答案: