CODEWITHSUNDEEP
javascriptjquery
Kishore
Kishore

Reputation: 1912

loop through li elements up the dom

I have li elements

<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>

When I mouse over say 3 how can i get all the elements up the dom? ie when i click or mouse over 3rd li i want 3 li's. when i mouse over 5th i have all 5. I am not sure how can i traverse up the dom i tried using parent() and parents() but didnt work.

Upvotes: 1

Views: 185

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206111

jsBin demo

just using .prevAll().andSelf() for a rating sys. could do the trick.

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

But be aware that if you want to maintain the original selector use in combination with : .andSelf() like:

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

I leave it to you to do the swap class trickery and the click magic. You have all you need.

Upvotes: 4

Related Questions