jQuery 选择器并获取上面元素的 id

Question

我有一个嵌套的 div 结构，如下所示:

<div id="outer">
  <h3 id="groupa">group a</h3>
  <div id="inner1">
  <div id="inner2">
  <h3 id="groupb">group b</h3>
  <div id="inner3">
  <div id="inner4">
</div>

当用户单击任何内部 div(内部？)时，单击处理程序应该传递组的 id(其上方最近的 h3)以及内部 div 本身的 id。因此，例如，单击最后一个内部 div 将调用带有参数“groupb”和“inner4”的函数。

我需要 1. 创建 jQuery 选择，将单击处理程序仅与内部关联？ div，以及 2. 让处理程序调用带有这 2 个参数的函数。像这样的东西:

$('#outer div').click(function () {
  myfunction(this.h3above.id,this.id);
});

有人可以帮助正确选择上面的 3 行代码，并获取所需的 2 个 id 吗？

Answer 1

您可以使用 jQuery 的 prevAll() 函数来选择上一个 h3 元素:

$('#outer div').click(function () {
  var h3_id = $(this).prevAll('h3').attr("id");
  var id = $(this).attr("id");
  myfunction(h3_id, id);
});

prevAll 函数获取“匹配元素集中每个元素的所有前同级元素，可以选择通过选择器进行过滤”。 (jQuery API)

就像上面的评论者所说，但是，您应该将内部分区的 id 更改为类，因为 id 对于有效的 HTML 来说应该是唯一的。