javascript - 如何使用 Javascript 查找下一张图片 src

Question

我选择了这种方式，这样我就可以将一手装满的图像放到一个文件夹中，仅此而已，我尝试了很多方法但没有任何效果，我最近的尝试是使用

$(".image-container").find("img[src="+ Img + "]").next('img').attr('src');

但还是不行。

这是我到目前为止的想法，任何帮助都会很棒，谢谢

<div id="removed-container" style="height: 600px;">
<div id="removed" style="height: 600px;">
<div style="float: left; width: 200px;">
  <h1> <span>The Gallery</span> </h1>
  <ul id="nav">
    <li><a href="" id="here">Gallery</a>
      <ul>
        <li><a href="#" data-albumid="gallery/fld01/">2015</a></li>
        <li><a href="#" data-albumid="gallery/fld02/">2015</a></li>
        <li><a href="#" data-albumid="gallery/fld03/">2015</a></li>
        <li><a href="#" data-albumid="gallery/fld04/">2015</a></li>
        <li><a href="#" data-albumid="gallery/fld05/">2015</a></li>
      </ul>
    </li>
    <li><a href="index.html">Back to home</a></li>
  </ul>
</div>
<div class="image-container"></div>

<script type="text/javascript"> $(document).ready(function () {
    $("a").click(function () {
        var dir_path=$(this).data("albumid");
        LoadGallery(dir_path);
        return false;
    });
});

function LoadGallery(dir_path) {
    $.ajax({
        url: dir_path,
        success: function(data) {

            $(".image-container").empty();

$(data).find("a:contains(.jpg), a:contains(.png), a:contains(.jpeg)").each(function() {
                 this.href.replace(window.location.host,"").replace("http:///",""); file=dir_path+$(this).text();
                $(".image-container").append($("<a href='java<!-- no -->script:;' class='thumb' data-src='"+file+"'><img src='"+file+"' title='Click to enlarge' alt='#'/></a>"));

                if ($(".image-container").children("a").length == 30) {
                    return false;
                }
            });

            $(".thumb").bind('click', function() {
                var Popup="<div class='bg'></div>"+"<div class='wrapper'><img src='<img src=''/>"+"<label href='javascript:;' class='prev-image'>&laquo;</label><label href='javascript:;' class='next-image'>&raquo;</label><a href='java<!-- no -->script:;' class='close' title='Close'>Close</a>";
                Img = $(this).attr("data-src"),
                $("body").prepend(Popup);
                $(".bg").height($(window).height()*4);
                $(".wrapper img").attr("src", Img);

                $(".prev-image").bind ('click',function() {
                    alert("Prev")
                })

                $(".next-image").bind ('click',function() {
                next = $(".image-container").find("img[src=" + Img + "]").next('img').attr('src');
                //alert(next) 
                })

                $(".close").bind ('click',function() {
                    $(this).siblings("img").attr("src", "")
                        .closest(".wrapper").remove();
                    $(".bg").remove();
                });
            });
        }
    });
} </script>
<div class="clear"></div>

Answer 1

问题出在 next() 的使用上。

来自 documentation - 获取匹配元素集中每个元素的紧随其后的兄弟。

在您的情况下，img 不是 sibling ，因此，没有匹配的元素集。

如果您的层次结构是严格的并且不会改变，那么您可以执行以下操作

/* Find image - go its parent - go to next anchor - get the image - get the source */ 
$(".image-container").find("img[src='" + Img + "']").parent().next('a').find("img").attr('src');

否则您可以遍历图像。

供引用 - http://plnkr.co/edit/onUeWl8mPqVhtaHf37xp?p=preview