如何获取div的id,点击按钮,里面呢?
问题描述:
我有多个面板,每个小组有它的添加按钮:如何获取div的id,点击按钮,里面呢?
<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。
我希望问题很清楚。
答
不喜欢它:
$("#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')
});
答
股利是按钮的父,所以你可以得到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必须是唯一的,所以使用共同的类的所有按钮,并使用它来注册点击处理程序。
答
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>
答
$(".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