CODEWITHSUNDEEP
jqueryclickjquery-selectors
Vincent Chua
Vincent Chua

Reputation: 1009

Jquery select 1 class after another?

My code: http://codepen.io/vincentccw/pen/jquJs

<ul id="menuDots">
    <li id="about1"><a href="#"><img class="bulletRoll" src="images/menu-dot.png" /><img src="images/menu-dot-rollover.png" /></a></li>
    <li id="about2"><a href="#"><img class="bulletRoll" src="images/menu-dot.png" /><img src="images/menu-dot-rollover.png" /></a></li>
    <li id="about3"><a href="#"><img class="bulletRoll" src="images/menu-dot.png" /><img src="images/menu-dot-rollover.png" /></a></li>
</ul>

<div class="btn">next btn</div>

Right now I have my button set up

$('.btn').click(function(){
    $('#menuDots li a img.bulletRoll').css({"display":"none"});
});

the problem is that I have 3 sets of buttons but in a different hierarchy,

1st button - $('#menuDots li a img.bulletRoll'), inside the first child of li

2nd button - $('#menuDots li a img.bulletRoll'), inside the second child of li

3rd button - $('#menuDots li a img.bulletRoll'), inside the third child of li

How do I set display:none only to the first .bulletRoll only, then the second click will set display none to the next .bulletRoll? I have try using next() but doesn't seem to be working?

Upvotes: 0

Views: 113

Answers (1)

nnnnnn
nnnnnn

Reputation: 150030

You can select the first of the .bulletRoll elements that is still visible:

$('.btn').click(function(){
    $('#menuDots li a img.bulletRoll').filter(':visible').first().css({"display":"none"});
});

Demo: http://codepen.io/anon/pen/nqJaI

Also you could use .hide() instead of .css({"display":"none"}).

Also also I wouldn't recommend using a div element as a "button", because the user can't access it via the keyboard so your page is not accessible for people who can't (or just choose not to) use a mouse or other pointing device. Use an anchor element or a button instead.

Upvotes: 2

Related Questions