Confusing traversal with jquery

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

one of the links in the list has the class "activethumb"

When the user clicks "next" I need to remove the class "activethumb" from the link, and add it to the next link.

I need this to happen until the user iterates to the end of the list.

here's my html:
HTML Code: [ Select ]
<ul id=adthumblist">
 <li>
  <a class="activethumb">&nbsp;</a>
 </li>
 <li>
  <a>&nbsp;</a>
 </li>
 <li>
  <a>&nbsp;</a>
 </li>
</ul>
 
  1. <ul id=adthumblist">
  2.  <li>
  3.   <a class="activethumb">&nbsp;</a>
  4.  </li>
  5.  <li>
  6.   <a>&nbsp;</a>
  7.  </li>
  8.  <li>
  9.   <a>&nbsp;</a>
  10.  </li>
  11. </ul>
  12.  


Here's my jquery, which is not working:
JAVASCRIPT Code: [ Select ]
$('#imgcontainer a #nextarrow').click(
         function()
            {
            var thumbSpot = $('a.activethumb').parent().index();
            var totThumb = $('.activethumb').parent().parent().length();
            if(thumbSpot < totThumb) {
            $('.activethumb')
            .removeClass("activethumb")
            .parent()
            .next()
            .child()
            .addClass("activethumb");
            });
 
  1. $('#imgcontainer a #nextarrow').click(
  2.          function()
  3.             {
  4.             var thumbSpot = $('a.activethumb').parent().index();
  5.             var totThumb = $('.activethumb').parent().parent().length();
  6.             if(thumbSpot < totThumb) {
  7.             $('.activethumb')
  8.             .removeClass("activethumb")
  9.             .parent()
  10.             .next()
  11.             .child()
  12.             .addClass("activethumb");
  13.             });
  14.  
  • Tannu4u
  • Proficient
  • Proficient
  • User avatar
  • Posts: 480
  • Loc: India

Post 3+ Months Ago

This works for me

Code: [ Select ]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<style>
.activethumb{
    background-color: yellow;
}
</style>

<ul id="adthumblist">
    <li>
        <a class="activethumb">Link1</a>
    </li>
    <li>
        <a>Link2</a>
    </li>
    <li>
        <a>Link3</a>
    </li>
</ul>

<a href="#" id="imgcontainer">Click here to see what happens</a>


<script>
$('#imgcontainer').click(
     function()
      {
                var thumbSpot = $('a.activethumb').parent().index();
                var totThumb = $('a.activethumb').parent().next();
                
                if(totThumb)
                {
                    $('.activethumb').removeClass("activethumb");
                    totThumb.children().addClass("activethumb");
                }
            }
        );

</script>
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  2. <style>
  3. .activethumb{
  4.     background-color: yellow;
  5. }
  6. </style>
  7. <ul id="adthumblist">
  8.     <li>
  9.         <a class="activethumb">Link1</a>
  10.     </li>
  11.     <li>
  12.         <a>Link2</a>
  13.     </li>
  14.     <li>
  15.         <a>Link3</a>
  16.     </li>
  17. </ul>
  18. <a href="#" id="imgcontainer">Click here to see what happens</a>
  19. <script>
  20. $('#imgcontainer').click(
  21.      function()
  22.       {
  23.                 var thumbSpot = $('a.activethumb').parent().index();
  24.                 var totThumb = $('a.activethumb').parent().next();
  25.                 
  26.                 if(totThumb)
  27.                 {
  28.                     $('.activethumb').removeClass("activethumb");
  29.                     totThumb.children().addClass("activethumb");
  30.                 }
  31.             }
  32.         );
  33. </script>

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 91 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.