Question

我的HTML：

<div class="container"><img src="path" class="A" id="A" /></div>
<div class="container"><img src="path" class="A" id="B" /></div>
<div class="container"><img src="path" class="A" id="C" /></div>
<div class="container"><img src="path" class="A" id="D" /></div>
<div id="Holder"></div>//displays large image
<div id="next">Next</div>//is used to displays next image
<input type="hidden" id="image_holder" />

我的jQuery：

 /******Place image in large holder********/
$(document).ready(function(){
    var i,a,h;
    h=$('#image_holder');
    i=$('img.A').prop('id');
    a="<img src='my path/" + i + ".jpg' class='C' />";
    $('#Holder').html(a); 
    h.val(i);
});
/*******Next Image*****************/
$(document).ready(function(){
    $('#next').on('click',function(){
        var ih,nxt, 
        ih=$('#image_holder').val()//id of the last image
        nxt=$('#' + ih).next('img.A').prop('id');
        //nxt=$('#' + ih).siblings().next('img.A').prop('id');I have also tried
        //nxt=$('#' + ih).parent().siblings().next('img.A').prop('id');I have also tried
        alert(nxt);
    });
});

警报给我的所有内容都是undefined。我需要在第一个之后的下一个图像ID。

当有人点击图片时，会将图片放入<div id="Holder">。我想要的是当用户点击下一个按钮时，流程中的下一个图像被放置在持有者中。

有人可以看看我的代码并告诉我我做错了什么或者我还没做什么？当我在警告框中删除.prop('id')我得到Object Object时。

Answer 1

.next()方法获得匹配元素集中每个元素的紧随其后的兄弟。

因为您的每个图片都是单独包装在<div class="container">中，所以他们没有直接的兄弟，而.next()的调用会返回一个空集。然后，当您随后调用.prop()时（注意：您应该使用.attr()来提取ID），它将返回undefined，因为它在一组空元素上运行。

要解决此问题，您可以将所有图像放在一个容器中。

<div class="container">
    <img src="path" class="A" id="A" />
    <img src="path" class="A" id="B" />
    <img src="path" class="A" id="C" />
    <img src="path" class="A" id="D" />
</div>

<强> DEMO

Answer 2

.next()为您提供下一个兄弟元素，但您的img元素都是唯一的子元素。所以你实际上想要先达到一个水平。你接近第三个选项，但你需要记住回到一个级别：

nxt=$('#' + ih).parent().next('.container').children("img").first().prop('id');

Answer 3

您需要比预期更多地遍历DOM，只需：

next = $(this).closest('.container').next('.container').find('img');

当然$(this)是起点（取而代之的是你实际使用的任何选择器）。

参考文献：

Answer 4

希望它可能会有所帮助，我花了一天的时间来寻找它...问题是（'img'）标签必须用大写（'IMG'）填充，否则，jquery将无法识别它。它去了！

如何在jQuery中使用next（）来选择div中的下一个图像？

4 个答案: