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

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

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


// this refers to the current element
// .parent() returns the nearest parent of a element<br>
// you can get any attribute using .attr() method on the required element