Как найти следующее изображение src с Javascript

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 не являются братьями и сестрами, следовательно, нет согласованного набора элементов.

Если ваша иерархия строг и не будет меняться, то вы можете сделать что-то вроде следующих

/* 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

Answer 2

Пожалуйста, попробуйте это ..

$('#id').next().find('img').attr("src"); 

надеюсь, что это поможет вы :)