Question

这是我在按钮点击事件中控制多个列表中的所选项目的HTML。

＆＃13;

$('#button').click(function(){
    var $next = $('.section.selected').removeClass('selected').next('.section')
    if ($next.length) {
        $next.addClass('selected'); 
    }
    else {
        $(".section:first").addClass('selected');
    }
});

//On click I select next div with same class and remove selected from previous.
//How to loop? After 3 is selected, I want it to go to one again.

＆＃13;

.selected { background:red }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="all">
  <div class="section selected">ONE</div>
  <div class="section">TWO</div>
  <div class="section">THREE</div>
</div>
<div id="all">
  <div class="section selected">ONE</div>
  <div class="section">TWO</div>
  <div class="section">THREE</div>
</div>
<br />
<a href="javascript:;" id="button">CLICK</a>

＆＃13;

但是，由于这些项目使用相同的类名，最后，脚本无法确定哪一个是第一个/最后一个项目。

任何人都可以给我一个想法吗？

Answer 1

在$(".section:first-child").addClass('selected')条件

中使用此代替else

Answer 2

要获取项目，请使用first-child，last-child等查询。

如需更多信息，请检查jQuery API Documentation

同时从不同的列表中选择项目

2 个答案: