javascript - 在 dom 中循环遍历 li 元素

Question

我有李元素

<ul class="">

        <li class="current-rating" id="current-rating" style="width: 0px"></li>

        <li><a href="#" title="1 star out of 5" class="one-star star star-rating stars-1">1</a></li>

        <li><a href="#" title="2 star out of 5" class="two-stars star star-rating stars-1">2</a></li>

        <li><a href="#" title="3 star out of 5" class="three-stars star star-rating stars-1">3</a></li>

        <li><a href="#" title="4 star out of 5" class="four-stars star star-rating stars-1">4</a></li>

        <li><a href="#" title="5 star out of 5" class="five-stars star star-rating stars-1">5</a></li>

   </ul>

当我将鼠标悬停在 3 上时，我怎样才能将所有元素都放在 dom 上？即，当我单击或将鼠标悬停在第三个 li 上时，我想要 3 个 li。当我将鼠标悬停在第 5 个时，我拥有所有 5 个。我不确定如何遍历我尝试使用 parent() 和 parents() 但没有工作的 dom。

Answer 1

jsBin 演示

仅.prevAll().andSelf()用于评级系统。可以做到这一点。

http://api.jquery.com/prevall
http://api.jquery.com/andself

但请注意，如果您想保持原始选择器与 : 结合使用，.andSelf()例如：

$('li').hover(function(){
   $(this).prevAll().andSelf().css({background: 'gold'});
},function(){
   $(this).prevAll().andSelf().css({background: '#eee'});
});

我把它留给你来做交换类的诡计和click魔法。你有你需要的一切。