2

寻找一种方法来完成用 jQuery 填充 div，遍历.. 我不擅长。

我的代码有一系列 6 个框，然后是一个内容框。另外 6 个框和一个内容框，如下所示：

<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='content'></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='content'></div>

我正在寻找的是当有人点击图像时 - 它只填充下一个.content div。

提前致谢。

=== 对于 Hugo .. 我得到的最接近的，显然填充了所有内容框的是：

$(".box img").click(function(){
                $(this).parent().parent().find(".content").html("X");
            });
4

3 回答 3

3 
$('.box img').click(function(){
   $(this).parent().nextAll('.content').first().text('...');
})
于 2013-03-27T21:42:36.800 回答
1

您需要为此使用适当的遍历函数。“最佳”版本取决于您的标记及其各个部分的相对稳定性，但现在让我们使用您提供的 HTML。

从 any 开始<img>，您要向上移动到其父级.box，然后查找下一个.content。翻译成 jQuery：

$(this).parent().nextAll(".content").first()
于 2013-03-27T21:42:14.397 回答
0 
$('img').click(function() {
  var $nextdiv = $(this).parent().nextUntil('.content').addBack().last().next();
  // do something with it
});

http://jsfiddle.net/mblase75/gRKfa/

http://api.jquery.com/nextUntil

（.nextAll().first()虽然不太复杂。）

于 2013-03-27T21:41:26.970 回答