jQuery跳到下一个元素

本文介绍了jQuery跳到下一个元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试使用jquery next函数单击链接以导航到无序列表中的下一个元素.我的物品在下面，但我收到404的提示，找不到[object Object]

I'm trying to use the jquery next function to click a link to navigate to the next element in an unordered list. What I have is below, but I get a 404 saying it couldn't find [object Object]

$('.next').click(function (event) { window.location = $('li').next(); });

和

<div id="nextButton"><a href="#" class="next" id="next">&gt;</a></div>

推荐答案

如果完全按原样发布代码，则存在很多语法错误.固定版本如下:

If you posted your code exactly as is, there are a lot of syntax errors. A fixed up version is below:

$('.next').click(function (event) { // missing $/jQuery window.location = $('li').next(); }); // missing the close parentheses

此外，由于您使用的是jQuery，因此您可能需要考虑使用类似的东西:

In addition, since you are doing things with jQuery, you might want to consider using something like:

// where selector is the selector for the element you are scrolling to $(window).scrollTop(selector.position().top);

编辑

如果它是水平的，则只需要相应地调整滚动代码.例如:

If it's horizontal, you should only need to adjust the scroll code accordingly. e.g.:

$(window).scrollLeft(selector.position().left);

编辑#2

以下是我认为您要实现的目标的非常基本的示例:

Here is a very basic example of what I think you are trying to achieve:

jsfiddle/FsjkM/

单击HTML部分，它将滚动到下一个列表元素(注意变化的数字).

Click the HTML portion and it'll scroll to the next list element (note the changing numbers).

在实际的应用程序中，您需要跟踪或计算当前"元素以允许上一个/下一个功能.

In your actual application you will need to keep track, or calculate, the "current" element to allow for previous/next functionality.

最终编辑

jsfiddle/FsjkM/1/

我已经对其进行了充实，以使您了解结构更完整的外观.请注意，不存在边界检查-如果您在开始时单击上一个"，或在末尾单击下一个"，则它将中断.

I've fleshed it out a bit to give you an idea of how a more complete structure will look. Note that no boundary checking exist -- if you click prev at the start, or next at the end, it'll break.