Question

我具有以下HTML结构

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="desc"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="desc"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="desc"></div>
</div>

对于每n个项目，将有一个类别为.desc的div，其中插入了先前.item的data属性的内容。

本质上，如果单击某个项目，则应始终将数据属性内容推送到下一个.desc（不一定是最接近的）。

我最想要实现的目标是：

$(this).next().siblings('.desc').show().html(data);

（其中$this是单击功能中的.item）。

但是，这会将内容推送到每个.item div中，而不仅仅是下一个。

Answer 1

您正在寻找nextAll(selector).first()：

$(this).nextAll(".desc").first().show().html(data);

（我使用.desc而不是.person-desc，因为前者与您的标记匹配。）

文档：

实时示例：

$(".container").on("click", ".item", function() {
  $(this).nextAll(".desc").first().html($(this).html());
});

.desc {
  background-color: yellow;
  min-height: 1em;
}

Click an item, and its text will be shown in the next .desc element after it (the ones with yellow backgrounds).
<hr>
<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="desc"></div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="desc"></div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="desc"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您可以使用.NextAll()。然后，您只需选择带有first()的第一项即可。这将为您提供具有指定选择器的下一个元素。

$(this).nextAll(".desc").first();

按类查找下一个元素（层次结构中的相同级别）

2 个答案: