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