Question

我有多个面板，每个面板都有“添加”按钮：

<div id="panel1">
<input type="button" id="addbut" value="Add it"></input>
</div>
<div id="panel2">
<input type="button" id="addbut" value="Add it"></input>
</div>
<div id="panel3">
<input type="button" id="addbut" value="Add it"></input>
</div>

单击按钮，我想打印包含此按钮的div的id（或其他属性）。在JQuery中，

$("#addbut").click(function(){
 alert(ID of panel to which this button belong - this.?) <-- Want to achieve
});

如果单击panel1中的按钮，则它应该是alert或consolelog id，即panel1。

我希望问题很明确。

Answer 1

div是按钮的父级，因此您可以获取parentNode及其id

$(".addbut").click(function() {
  alert(this.parentNode.id);
  console.log($(this).parent().attr('id'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel1">
  <input type="button" class="addbut" value="Add it" />
</div>
<div id="panel2">
  <input type="button" class="addbut" value="Add it" />
</div>
<div id="panel3">
  <input type="button" class="addbut" value="Add it" />
</div>

另请注意，元素的ID必须是唯一的，因此请对所有按钮使用公共类，并使用它来注册单击处理程序。

Answer 2

ID 必须是唯一的，因此将id更改为class，就像这样

$(".addbut").click(function(){
  alert($(this).parent().attr('id'));
  // $(this) - refers to button 
  // $(this).parent() returns parent element
  // .attr('id') return id attribute    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel1">
  <input type="button" class="addbut" value="Add it">
</div>

<div id="panel2">
  <input type="button" class="addbut" value="Add it">
</div>

<div id="panel3">
  <input type="button" class="addbut" value="Add it">
</div>

Answer 3

这样做：

$("#addbut").click(function(){
 alert($(this).parent().attr('id')) <-- Want to achieve
});

你也可以这样做：

$("#addbut").click(function(){
  alert($(this).closest('div').attr('id'))
});

另请注意，每个元素都应该有唯一的id。因此，使用class代替class="addbut"，代码将为

$(".addbut").click(function(){
  alert($(this).closest('div').attr('id')) //OR $(this).parent().attr('id')
});

Answer 4

(.//*[@id='courseEndDate']/following-sibling::img[@class='ui-datepicker-trigger'])[1]

如何获取div的id，点击按钮，在里面？

4 个答案: