jquery - 按下上一个和下一个按钮时模拟元素列表中的元素单击

Question

我需要创建一个 jQuery 脚本来模拟另一个元素的单击，从元素列表中，每次按下按钮时，单击列表中的下一个元素，每次按下按钮时，上一个元素从单击列表。

这是部分有效的代码，但只点击一次

$('#next').click(function() {
  $('li a').trigger('click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <span>
    <span>
    <a href="#" class="current">image</a>
    </span>
    </span>
  </li>
  <li>
    <span>
    <span>
    <a href="#" class="">image</a>
    </span>
    </span>
  </li>
  <li>
    <span>
    <span>
    <a href="#" class="">image</a>
    </span>
    </span>
  </li>
</ul>
<div id="prev">prev</div>
<div id="next">next</div>

简而言之，当我按下“下一个”按钮时，我想模拟在具有类“当前”的元素之后单击标记，但是当我按下按钮“上一个”时，我想模拟在具有类的元素之前单击标记“当前的”。

可悲的是，这种布局需要跨度，如果它们不存在，我很可能会使用 .next() 函数，就像我在类似的堆栈帖子中看到的那样，但因为在我的情况下，元素不是一个接一个地直接定位，这个功能不起作用，或者我不能让它起作用。

谢谢！

标签： jqueryhtml

Answer 1

根据@Taplar 的评论创建答案。

此代码示例基于a当前类的 prev/next 改进。它找到closest li，然后转到下一个（或上一个）并触发点击。

最接近()：给定一个代表一组 DOM 元素的 jQuery 对象，.closest() 方法在 DOM 树中搜索这些元素及其祖先

$('#next').click(function() {
  var $next = $('a.current').closest('li').next().find("a");
  $next = $next.length > 0 ? $next : $("ul li:first-child a"); //if the end get the first one.
  $next.trigger('click');
});
$('#prev').click(function() {
  var $prev = $('a.current').closest('li').prev().find("a");
  $prev = $prev.length > 0 ? $prev : $("ul li:last-child a"); //if the start get the last one.
  $prev.trigger('click');
});
//sample "click" event to toggle the current class
$("li a").click(function(e) {
  e.preventDefault();
  $("li a").removeClass("current");
  $(this).addClass("current");
});

.current {
  background-color: orange;
}

div[id] {
  border: 1px solid #ccc;
  border-radius: 10px;
  height: 20px;
  width: 50px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <span>
    <span>
    <a href="#" class="current">image</a>
    </span>
    </span>
  </li>
  <li>
    <span>
    <span>
    <a href="#" class="">image</a>
    </span>
    </span>
  </li>
  <li>
    <span>
    <span>
    <a href="#" class="">image</a>
    </span>
    </span>
  </li>
</ul>
<div id="prev">prev</div>
<div id="next">next</div>