Javascript jQuery DOM遍历

我得到了以下源代码，由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>

编辑：单击的图像应仅出现在以下第一个中。测试类。。而不是在所有的后续

---

问候语

首先，页面上不应该有任何重复的id。您需要改用类。 然后你可以用

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

或

---

使用

。下一步

。从jQuery文档中：

获取集合中每个元素紧跟其后的同级 匹配元素。如果提供了选择器，它将检索下一个 仅当它与该选择器匹配时才为同级

您的代码应该如下所示：

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

---

另外，正如Anoop所说，使用重复id是无效的HTML，应该用类来代替。

谢谢，但我想我需要更具体一些……我已经解决了您提到的id问题，但当涉及到我的主要问题时，我忘了提一下，单击的图像应该只出现在第一个下一个中，而不是出现在每个下一个中。谢谢！！就像它应该的那样工作

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

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