jQuery DOM遍歷

Question

我得到了以下源代碼，該源代碼是由PHP服務器文件生成的：

<div class="row">
<img src="xxx.jpg" data-imgurl="xxx.jpg" width="200"/>
<img src="xxx.jpg" data-imgurl="xxx.jpg" width="200"/>
<img src="xxx.jpg" data-imgurl="xxx.jpg" width="200"/>

<div class="test"></div>

<img src="xxx.jpg" data-imgurl="xxx.jpg" width="200"/>
<img src="xxx.jpg" data-imgurl="xxx.jpg" width="200"/>
<img src="xxx.jpg" data-imgurl="xxx.jpg" width="200"/>

<div class ="test"></div>

<img src="xxx.jpg" data-imgurl="xxx.jpg" width="200"/>
<img src="xxx.jpg" data-imgurl="xxx.jpg" width="200"/>
<img src="xxx.jpg" data-imgurl="xxx.jpg" width="200"/>

<div class ="test"></div>

</div>

現在，我要跟蹤對任何圖像的單擊並在適當的#test div中顯示完整尺寸的圖像。 但是我不知道如何訪問最近的#test div，因為這是圖像應附加的地方。

$('.row').on('click', 'img', function(

)};

編輯：單擊的圖像應僅出現在下面的第一個.test類中，而不應出現在所有后面的圖像中。

問候

Answer 1

首先，頁面上不應有重復的ID。 您需要使用一個類。 然后您可以使用

$('.row').on('click', 'img', function(){
     $(this).nextUntil(".test").next().empty().append($(this).clone());
});

要么

$('.row').on('click', 'img', function(){
     $(this).nextUntil(".test").next().html($(this).clone());
});

小提琴

Answer 2

使用.next 。 從jQuery文檔中：

獲取匹配的元素集中每個元素的緊隨其后的同級。 如果提供了選擇器，則僅當與該選擇器匹配時才檢索下一個同級。

您的代碼應如下所示：

$('.row').on('click', 'img', function({
    $(this).next('div')    //Append the image here
});

同樣，正如Anoop所說，使用重復ID是無效的HTML，應將其替換為類。