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 class..而不是所有以下.

问候

Answer 1

首先，页面上不能有重复的id。您需要改用 class。然后你可以使用 like,

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

Fiddle

Answer 2

使用.next。来自 jQuery 文档：

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

您的代码应如下所示：

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

此外，正如 Anoop 所说，使用重复的 ID 是无效的 HTML，应替换为 class。

jQuery DOM 遍历

jQuery DOM Traversing

javascript

jquery

traversal