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

Question

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

我想点击带有 selected 类属性的订单行旁边的元素，所以它变成:

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

我尝试了 $('.orderline .selected').next().click() 但它仅适用于迭代同级。

无需手动应用.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>