我需要使用 :eq()
(或者其他方法,如果您有更好的解决方案)根据索引选择特定范围的 jquery 元素
我的html结构如下:
<ul>
<li>slide0</li>
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
<li>slide4</li>
</ul>
当用户将幻灯片悬停在幻灯片2上时,我需要选择li:eq(0)、li:eq(1)
和li:eq(3)、li:eq( 4)
分开,因为它们有不同的动画。
这是我的解决方案,但这感觉有点困惑......
var $slides, theOthers, slidesTotal;
$slides = $('ul > li');
slidesTotal = $slides.length;
theOthers = function(slideIndex ,slidesTotal){
var before = [], after = [], i=0;
while (i<=slideIndex - 1){
before[i] = ":eq(" + i + ")"
i++
};
while (i <= slidesTotal) {
after[i] = ":eq(" + i + ")"
i++
};
return [ before.join(",") , after.join(",") ]
}
$slides.mouseenter(function(){
var groups, slideIndex, $that = $(this);
slideIndex = $that.index();
groups = theOthers(slideIndex, slidesTotal);
$slides.filter(groups[0]).dosomething();
$slides.filter(groups[1]).dosomethingelse()
})
有没有更简单的方法来使用 jQuery 来做到这一点?
最佳答案
使用.prevAll()
和 .nextAll()
您可以将问题中的所有代码减少为:
$('ul > li').mouseenter(function() {
$(this).prevAll().dosomething();
$(this).nextAll().dosomethingelse();
});
.prevAll()
获取所有 previous sibling 姐妹,并且 .nextAll()
获取所有以下 sibling ,您可以对每组执行您想要的操作。
关于javascript - 根据索引选择一系列 dom 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3734041/