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 select？ divs和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更改为类，因为对于有效的HTML，ID应该是唯一的。

Answer 2

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

演示：Fiddle

Answer 3

正如两位评论者所说，你应该有唯一的身份证。

我在这里有一个jsFiddle，关于如何获取id。

我在可点击元素中添加了类，并在其上绑定了click事件。假设h3与'inner'div处于同一级别，请使用.prev函数查找h3并获取其id。

所有人都说最好的做法是更好地分组你的内在元素并使用唯一的id。多个元素可以具有相同的类但不具有ID。

略微修改HTML：

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

<br/><br/>
Your Results:
<br/><br/>
  <div class="output1"></div><!--This inner's closest h3-->
  <div class="output2"></div> <!--This inner ID-->

使用Javascript：

$('.clickable').click(function(){
    //.attr fetches the attribute value
    $('.output1').text($(this).attr('id')); 
    $('.output2').text($(this).prev('h3').attr('id'));

    /*
    $(this).attr('id')  -- this contains the clicked element id
    $(this).prev('h3').attr('id') -- this contains the closest h3's id

    you could store them in a variable and then call your function with it.

    */
});

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

3 个答案: