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

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 个项目，将有一个 div，class 为 .desc，其中前一个 .item 的数据属性的内容是已插入。

本质上，如果您单击一个项目，它应该始终将数据属性内容推送到下一个 .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()。然后你只需要 select 第一项 first()。这将为您提供具有指定 selector.

的下一个元素

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

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

Find next element by class (same level in hierarchy)

jquery

dom-traversal