Javascript JQuery在无序列表中查找下一个类

我在我的网站上使用JQuery/Ajax实现一些功能。目前，我有一个左侧显示无序列表，每个列表元素都有一个类似shop thumb的类，每当有人单击shop thumb时，右侧的内容都会加载Ajax

现在，我想合并一个next/previous按钮，这样用户就可以单击next（从右侧），下一个列表项将加载ajax，更改右侧的内容

以下是我正在使用的基本版本：

<div class="thumbs">
    <ul class="products">
        <li class="shop-thumb"><a href="www.google.com/123"><img src="www.google.com/image1" /></a></li>
        <li class="shop-thumb"><a href="www.google.com/456"><img src="www.google.com/image2" /></a></li>
        <li class="shop-thumb"><a href="www.google.com/789"><img src="www.google.com/image3" /></a></li>
        <li class="shop-thumb"><a href="www.google.com/101112"><img src="www.google.com/image4" /></a></li>
        <li class="shop-thumb"><a href="www.google.com/131415"><img src="www.google.com/image5" /></a></li>
    </ul>
</div>

<div class="paginate">
    <div class="prev">Prev</div> | <div class="next">Next</div>
</div>

<div class="main">
<!-- Ajax comes in here -->
</div>

上一篇|下一篇

以下是我在JQuery/Ajax调用中的内容——除了.next click函数外，一切都正常工作：

<script>
jQuery(document).ready(function($){
    var defaultValue = $("ul.products li.shop-thumb a:first").attr("href");

    $(".main").load(defaultValue);

  $("ul.products li.shop-thumb a").click(function(e){
      e.preventDefault();

      var addressValue = $(this).attr("href");
    $(".main").load(addressValue);

  });

  $(".next").click(function() {
      $("ul.products").next();
      var newValue = $("ul.products .shop-thumb a").attr("href");
      $(".main").load(newValue);
  });

});
</script>

jQuery（文档）.ready（函数（$）{
var defaultValue=$（“ul.products li.shop-thumb a:first”）.attr（“href”）；
$（“.main”）.load（默认值）；
$（“ul.products li.shop-thumb a”）。单击（功能（e）{
e、 预防默认值（）；
var addressValue=$（this.attr（“href”）；
$（“.main”）.load（addressValue）；
});
$（“.next”）。单击（函数（）{
$（“ul.products”）.next（）；
var newValue=$（“ul.products.shop thumb a”）.attr（“href”）；
$（“.main”）.load（newValue）；
});
});

如果您能帮助我实现下一个/上一个功能，我们将不胜感激。我想我应该使用

.next（）

，

.find（）

或

.nextAll

---

如果你不介意扔给我一根骨头，给我看一个例子，这样我就可以知道我哪里做错了，哪里做错了。

你需要为当前项目设置一个标记，以确定下一个项目是什么。一旦找到下一个项目，就可以在该项目上触发click事件来调用处理程序

您可以使用这样的类

jQuery(document).ready(function ($) {
    $("ul.products li.shop-thumb a").click(function (e) {
        e.preventDefault();

        var addressValue = $(this).attr("href");
        $(".main").load(addressValue);

        //remove the active class from previous item
        $("ul.products li.active").removeClass('active');
        //add the active class to the current li element
        $(this).closest('li').addClass('active');
    });

    $(".next").click(function () {
        //find the next item and trigger the click event
        $("ul.products li.active").next().find('a').trigger('click');
    });

    //default loading
    $("ul.products li.shop-thumb a:first").click();

});

---

有这么多代码，你应该做一把小提琴。另外，

defaultValue

通常是一个元素属性，您可能希望考虑不要将其用作变量名。对于返回值

.next（）

，您不会执行任何操作。你期望它做什么？而且

ul.products

在它之后没有任何东西。你似乎完全不知道

.next（）

的功能，你只是猜测它与你的

next

按钮需要的功能相关，因为它们的名称相似。谢谢vol7ron，我甚至没有想过使用小提琴@Barmar，你说得对，这是我第一次实现.next（），我在这里读到了关于它的内容：但不清楚，经过几次尝试后，我向这里的社区寻求一些建议：）我一般不建议使用w3schools，但似乎很清楚：next（）方法返回所选元素的下一个同级元素。感谢Arun，这正是我想要的…快速问题，我如何合并上一个按钮单击功能？我可以使用如下相同的逻辑：'$（“.prev”）.click（函数（）{$（（$（.ul.products li.active”）.prev（）.find（'a'）.trigger（'click'）；}）；'我想我用最后一句话回答了我的问题，再次感谢你的帮助，真的帮助我理解了我的问题。