如何获取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> 

在按钮的点击，我想打印ID（或其他属性），其中该按钮包含股利。在JQuery中，

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

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

我希望问题很清楚。

Answer 1

不喜欢它：

$("#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 2

股利是按钮的父，所以你可以得到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 3

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 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