我的代码：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>

现在我的按钮已经设置好了

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

问题是我有3组按钮，但在不同的层次结构中，

第一个按钮-$('#menuDots li a img.bulletRoll')，位于li的第一个子元素内
第二个按钮-$('#menuDots li a img.bulletRoll')，位于li的第二个子元素内
第三个按钮-$('#menuDots li a img.bulletRoll')，位于li的第三个子元素内
如何将display:none仅设置为第一个.bulletRoll，然后第二次单击将显示无设置为下一个.bulletRoll？我已经尝试使用next()，但似乎不工作？