javascript循环以选择特定项

我试图在每个导航项下设置正确的div来设置动画，而不是使用“navItemUnder”类来设置所有导航项的动画。当您将鼠标悬停在其中一个导航项上时，您可以在这个代码笔中看到我的意思

我想要一种方法，只选择右导航项下的一行，同时保持我们的HTML方式得体

代码笔：

---

您可以使用id属性来区分元素：

var-activeItem；
TweenMax.set（“.navItemUnder”{
不透明度：0，
scaleX:.1，
变换原点：“左上角”
})
$（“.navItem”）。悬停（在上方，向外）；
（e）上的函数{
activeItem=e.toElement.id；
TweenMax.至（“#”+活动项+“_下”，1{
不透明度：1.0，
scaleX:1，
ease:Expo.easeOut
})
}
功能输出（e）{
TweenMax.至（“#”+活动项+“_下”，1{
不透明度：0.0，
scaleX:.1，
ease:Expo.easeOut
})
}

*{
保证金：0；
填充：0；
}
a{
文字装饰：无；
}
导航{
边缘顶部：50px；
左边距：50像素；
}
.台词{
浮动：左；
明确：两者皆有；
左边距：50像素；
}
ulli{
显示：块；
浮动：左；
填充：0.4px；
利润率：0.4px；
文本对齐：居中；
}
纳维滕先生{
宽度：46px；
高度：26px；
背景：透明；
光标：指针；
}
纳维特姆{
宽度：46px；
高度：2倍；
背景：绿色；
填充顶部：0；
边际上限：0；
}

第1项
第2项
第3项
第4项

问题在于将tweenMax.to应用于所有.navItemUnder元素，所有元素都是。您可能希望添加一个索引类或找到正确的。navItemUnder分别查看一下，正如@mahatmanich所说，您可以使用

.index（）

和

.eq（）

的组合来仅为所需的元素设置动画。

$(".navItem").hover(over, out);
function over(){
TweenMax.to(".navItemUnder", 1, {opacity:1.0, scaleX:1,     ease:Expo.easeOut})
}
function out(){
TweenMax.to(".navItemUnder", 1, {opacity:0.0, scaleX:.1,     ease:Expo.easeOut})
}