1

我有一个嵌套的 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 选择？divs 和 2. 使处理程序调用具有这 2 个参数的函数。就像是：

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

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

4

3 回答 3

3

您可以使用 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内部部门的 's 更改为类，因为对于有效的 HTML，id 应该是唯一的。

于 2013-03-08T04:12:01.133 回答
0 
$('#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);
})

demo: Fiddle

于 2013-03-08T04:15:02.387 回答
0

正如两位评论者指出的那样，您应该拥有唯一的 ID。

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

我向可点击元素添加了类，并在其上绑定了点击事件。假设 h3 与“内部”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.

    */
});
于 2013-03-08T04:16:07.813 回答