根据索引选择一系列dom元素

时间:2010-09-17 09:17:06

标签: javascript jquery

我需要使用:eq()根据索引选择特定的jquery元素格式(如果你有更好的解决方案,还需要其他东西)

我的html结构如下:

<ul>
  <li>slide0</li>
  <li>slide1</li>
  <li>slide2</li>
  <li>slide3</li>
  <li>slide4</li>
</ul>

当用户将幻灯片悬停在slide2上时,我需要分别选择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有更简单的方法吗?

2 个答案:

答案 0 :(得分:6)

使用.prevAll().nextAll(),您可以在问题中减少所有代码:

$('ul > li').mouseenter(function() {
   $(this).prevAll().dosomething();
   $(this).nextAll().dosomethingelse();
});

.prevAll()获得所有以前的兄弟姐妹,.nextAll()获得所有兄弟姐妹,你可以按照自己的意愿去做每一组。

答案 1 :(得分:0)

jQuery('someElm ~ .someClass')

匹配任何兄弟.someClass

之前的所有元素seomeElm