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());
});

小提琴