jQuery獲取下一個元素的圖像ID

Question

我有一個圖像列表，我正在嘗試使用Jquery從當前元素中查找下一個圖像ID。但是我似乎無法使jquery工作。

<div class="grid" style="position: relative;">
 <div class="preview">
  <img src="1.jpg" id="175" alt="">
 </div>
</div>
<div class="grid" style="position: relative;">
     <div class="preview">
      <img src="2.jpg" id="176" alt="">
     </div>
    </div>
<div class="grid" style="position: relative;">
     <div class="preview">
      <img src="3.jpg" id="177" alt="">
     </div>
    </div>

的JavaScript

var childId=6;
$( ".grid" ).click(function() {
        var image=$(this).find("img");
        var imageId=image.attr("id")
        show_image(imageId,childId);
    });

function show_image(imageId,childId){
  //need to get next image id in the group for next button , but code below is returning undefined
  var nextImageId=$(".grid .preview #" + imageId).next("img").attr("id");
}

Answer 1

在這種情況下，您不能直接使用.next() ，因為圖像不是彼此siblings ，

var nextImageId= $("#" + imageId).closest('.grid').next(".grid").find('img').attr("id");

Answer 2

使用它，它將在“ nextImageId”變量中為您提供圖像ID。

$( ".grid" ).click(function() { 
     var nextImageId = $(this).closest('.grid').next(".grid").find('img').attr("id");   
});

Answer 3

使用next（）獲取下一個網格選擇器，然后找到img

 $(".grid").click(function () {
    var image = $(this).find("img");
    var imageId = image.attr("id")

   var nextImageId= $(this).next(".grid").find("img").attr("id")  // get next image id
});