Question

寻找一种方法来完成用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。

提前致谢。

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

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

Answer 1

$('.box img').click(function(){
   $(this).parent().nextAll('.content').first().text('...');
})

Answer 2

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

从任何<img>开始，您希望向上移动到其父.box，然后查找下一个.content。转换为jQuery：

$(this).parent().nextAll(".content").first()

Answer 3

$('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()相当简单。）

jQuery Tree遍历选择下一个div

3 个答案: