查找与文档相关的下一个类 - jQuery答案

【问题标题】：Find next class relative to document - jQuery查找与文档相关的下一个类 - jQuery
【发布时间】：2013-01-10 06:40:36
【问题描述】：

嘿，我需要一些帮助我已经制作了这个画廊插件，我现在需要一种方法来找到下一个类，该类相对于文档调用插件，以防图像位于不同的父 div 中？检查下面的代码

<!-- HTML -->
<div id="a">
    <img class="image" src="/gallery/a.png" style="max-width:200px;max-height:200px;"/>
</div>
<div id="b">
    <img class="image" src="/gallery/b.jpg" style="max-width:200px;max-height:200px;"/>
</div>
<div id="c">
    <img class="image" src="/gallery/c.jpg" style="max-width:200px;max-height:200px;"/>
</div>


// jQuery
$('.image').imageGallery();

var next = $(self).next().attr("src"); // "Self" being the current image its on

只有当所有图像都位于同一个父 div 中时，上述方法才可行，但我希望能够获得所有与 body 具有相同类的图像。

非工作示例：

$("body").find(self).next()

【问题讨论】：

标签： javascript jquery dom find

【解决方案1】：

将您应用.imageGallery(); 的所有图像存储一次，然后重复使用该列表：

var images = $('.image');
images.imageGallery();

var next = images.eq( images.index(self) + 1 );

【讨论】：

+1 不错。但如果没有下一个图像，它会给出undefined 错误。请检查此fiddle。
你现在让我的画廊栩栩如生！
有没有办法引用 self 对图像数组来获取它的位置？
@JustinJohn：这没有错误，这是意料之中的。第三张图片后没有元素，空选返回undefined属性。对于旋转方式，您可以使用modulo images.length

【解决方案2】：

您可以使用以下代码：

$(self).parent().next().child().attr("src");

我知道这似乎还有很长的路要走，但这可能会有所帮助。

【讨论】：

【解决方案3】：

你可以试试这个：

var images = $("body").find("img");
var next = images[images.index(self) + 1];
source = $(next).attr('src');

【讨论】：

我希望能够在整个文档中搜索下一个 $(self)，因为在某些情况下，图像可能被多个父级等分开。
在这种情况下，您应该创建对所有图像的引用。只要您想访问下一张图片，就可以使用它。