jQuery在使用类属性时选择下一个子元素

Question

<ul class="orderlines">
    <li class="orderline selected"></li>
    <li class="orderline"></li>
    <li class="orderline"></li>
</ul>

我想点击带有selected class属性的订单行旁边的元素，所以它变为：

<ul class="orderlines">
    <li class="orderline "></li>
    <li class="orderline selected"></li>
    <li class="orderline"></li>
</ul>

我试过了$('.orderline .selected').next().click()，但它只适用于迭代兄弟姐妹。

无需手动应用.selected，只需点击下一个元素即可。

Say selected应用于列表中的最后一个元素。然后它应该找到并单击列表中的第一个元素。

Answer 1

将jQuery对象与orderline中的第一个元素组合，然后从组合的jQuery对象中获取最后一个元素。

$('.orderline.selected').next().add('.orderline:first').last().click();

$('.orderline').click(function() {
  $('.selected').removeClass('selected');
  $(this).addClass('selected');
})


setInterval(function() {
  $('.orderline.selected').next().add('.orderline:first').last().click();
}, 1000)

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="orderlines">
  <li class="orderline selected">1</li>
  <li class="orderline">2</li>
  <li class="orderline">3</li>
</ul>

工作：

1. add()方法将与next()方法返回的元素和第一个元素结合使用。
2. 结果对象中的元素顺序与文档中的元素顺序相同，因此我们需要从组合中获取最后一个元素。
3. 当它到达最后一个li next()时返回空对象，组合对象只包含第一个元素，因此last()将选择第一个元素。

或者我们需要检查next()是否返回元素。

//  get next element
var $ele = $('.orderline.selected').next();
// check empty or not, if empty get first element
if (!$ele.length) $ele = $('.orderline:first');
// fire click event
$ele.click();

$('.orderline').click(function() {
  $('.selected').removeClass('selected');
  $(this).addClass('selected');
})


setInterval(function() {
  var $ele = $('.orderline.selected').next();
  if (!$ele.length) $ele = $('.orderline:first').click();
  $ele.click();
}, 1000)

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="orderlines">
  <li class="orderline selected">1</li>
  <li class="orderline">2</li>
  <li class="orderline">3</li>
</ul>