www.webdeveloper.com
Results 1 to 6 of 6

Thread: target multiple same class

  1. #1
    Join Date
    Sep 2011
    Posts
    9

    target multiple same class

    Hi
    I have class that I am changing color with jquery
    Code:
    $('.paginationContainer li').eq(ThumbPageNum).css({'color':'#f00'});
    Now this works fine. Notice that class name is paginationContainer so its a part of pagination code. so its repeated two times on page. So the problem is the one on top changes its color but not the other at the bottom. Even if I interact with the bottom one all works fine accept the color is changed at the top and not bottom

    So how can I target both class on one click on the same page to change the color of both divs.

    Thank you

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    You'll need to post some HTML

    The ".eq" part is only going to target one LI. So if you want to hit more than one, try this:

    Code:
    $('.paginationContainer li').css({'color':'#f00'});
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Sep 2011
    Posts
    9
    Thanks for response. Here are more code

    Code:
    <div class="paginationContainer">
     <div class="vid_prevPage">Previous</div>
     <ul>
      <li style="color: rgb(0, 0, 0);">1</li>
      <li style="color: rgb(0, 0, 0);">2</li>
      <li style="color: rgb(0, 0, 0);">3</li>
      <li style="color: rgb(0, 0, 0);">4</li>
      <li style="color: rgb(0, 0, 0);">5</li>
      <li style="color: rgb(0, 0, 0);">6</li>
     </ul>
     <div class="vid_nextPage">Next</div>
    </div>
    The above block of code is place two times in dom. One at top and other at bottom. What I want that if the li on top is clicked then it change its color to red and it work fine with the below code
    Code:
    $('.paginationContainer li').eq(ThumbPageNum).css({'color':'#f00'});
    I want - if the top li is clicked then both the li on top and bottom should change its color to red.
    Last edited by alflashy; 10-10-2011 at 10:07 AM.

  4. #4
    Join Date
    Sep 2011
    Posts
    9
    Nevermind, I got it worked. this did the trick.

    $('.paginationContainer li:nth-child('+(ThumbPageNum+1)+')').css({'color':'#f00'});

  5. #5
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  6. #6
    Join Date
    Sep 2011
    Posts
    9
    Wonderful, it will really help other who have similar problems
    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles