Question

我的HTML代码为

<li><button id="1" class="vote btn" type="button" /></li>
<li><button id="2" class="voteUp btn" type="button" /></li>  // Only button with class= voteUp
<li><button id="3" class="vote btn" type="button" /></li>
<li><button id="4" class="vote btn" type="button" /></li>
.
.
.
<li><button id="x" class="vote btn" type="button" /></li>

现在通过jquery，当我点击任何这些按钮时，我想找出已经获得类“voteUp”的按钮的id。（这个班级只有一个按钮）。

我怎样才能找到它？我试图用.hasClass()解决这个问题，但直到现在还没有成功。请帮助。

更新：

实际HTML＆amp; PHP代码

<li class="box">
    <div class="temLine">This is the fifth line</div>
    <div class="pushUp"><input id="line5" class="voteUpBtn vote" name="voteUp" type="button" /></div>
     <div class="userName clear">- by ptamzz</div>
     <div class="clear"></div>
</li>

上面的代码将使用PHP循环，并生成一个列表。就像我说的，其中一个按钮（此处输入）将有一个'voteUp'类，而其他所有按钮都有'投票'类。

Answer 1

点击处理程序内部：

var id = $(this).parent().siblings('li').find('.voteUp').attr('id');

这将检查所有其他按钮。要确定当前按钮是否为具有类voteUp的按钮，您可以简单地使用$(this).hasClass('voteUp')（您还可以创建一个表达式来检查所有按钮，但为什么要使用不必要的（可能是昂贵的）查找？）。

总结如下：

$('button').click(function() {
    var id;
    if($(this).hasClass('voteUp')) {
        id = $(this).attr('id');
    }
    else {
        id = $(this).parent().siblings('li').children('.voteUp').attr('id');
    }
});

<强>更新

有关方法的详细说明，请查看http://api.jquery.com

简而言之：

.parent()将获取父元素
.siblings('li')将选择元素的所有兄弟节点<li>元素（兄弟节点是与元素处于同一级别的所有其他元素（因此具有相同的父元素））< / LI>
.children('.voteUp')将选择元素类voteUp的子项（直接后代）。
.attr('id')返回id属性的值。

你说你的按钮实际上是用另一个div包裹的。然后，调用应该如下所示，而不是使用.parent()和.children()：

$(this).closest('li').siblings('li').find('.voteUp').attr('id');

，其中

.closest()将返回与选择器匹配的最近祖先
.find()将返回与给定选择器匹配的任何后代

Answer 2

如果你绑定了<button>或<li>上的点击处理程序，那么在你的点击处理程序中，这将获得类{{1}按钮的ID }}：

voteUp

已编辑以反映OP正在使用的实际标记。

如何识别具有某个类的HTML元素的id

2 个答案: