使用Jquery查找父div的id

我有一些像这样的HTML:

    

        Volume = 
        Check answer
    
    

和一些JS这样:

$("button").click(function () {
    var buttonNo = $(this).attr('class');
    var correct = Number($(this).attr('rel'));

    validate (Number($("#"+buttonNo+" input").val()),correct);
    $("#"+buttonNo+" div").html(feedback);
});

我真正喜欢的是如果我没有按钮上的class ="1"(我知道数字类无效,但这是一个WIP!),所以我可以确定buttonNo基于父div的id.在现实生活中,有多个部分看起来像这样.

如何找到按钮的div的id.

在按钮代码中存储答案的更加语义的方法是什么.我希望尽可能让非程序员在不破坏东西的情况下进行复制和粘贴!

Mark.. 211

您可以在父div上使用事件委派.或者使用最近的方法查找按钮的父级.

两者中最简单的可能是最接近的.

var id = $("button").closest("div").prop("id");

+1感谢您推荐最近的,每个人都建议父母或父母...... (8认同)

我真的很喜欢最近,因为你可以做类似.closest("div.foo")之类的东西,代码与结构无关. (6认同)

Thx我即将做一个递归函数....然后我知道jquery已经有了东西...在我的情况下我使用$("#"+ id).closest("div.form-group")来查找有形式组类的父div. (2认同)

---

Robert Grant.. 48

1.

$(this).parent().attr("id");

2.

必须有很多方法!一个可能是隐藏包含答案的元素,例如

    Volume = 
    Check answer
    3.93e-6</span>
    

然后有类似的jQuery代码到上面抓住:

$("button").click(function () 
{
    var correct = Number($(this).parent().children("span").text());
    validate ($(this).siblings("input").val(),correct);
    $(this).siblings("div").html(feedback);
});

请记住,如果您将答案放在客户端代码中,那么他们可以看到它:)最好的方法是在服务器端验证它,但对于范围有限的应用程序,这可能不是问题.

1> Mark..：

---

您可以在父div上使用事件委派.或者使用最近的方法查找按钮的父级.

两者中最简单的可能是最接近的.

var id = $("button").closest("div").prop("id");

---

+1感谢您推荐最近的,每个人都建议父母或父母......

---

我真的很喜欢最近,因为你可以做类似.closest("div.foo")之类的东西,代码与结构无关.

---

Thx我即将做一个递归函数....然后我知道jquery已经有了东西...在我的情况下我使用$("#"+ id).closest("div.form-group")来查找有形式组类的父div.

2> Robert Grant..：

---

1.

$(this).parent().attr("id");

2.

必须有很多方法!一个可能是隐藏包含答案的元素,例如

    Volume = 
    Check answer
    3.93e-6</span>
    

然后有类似的jQuery代码到上面抓住:

$("button").click(function () 
{
    var correct = Number($(this).parent().children("span").text());
    validate ($(this).siblings("input").val(),correct);
    $(this).siblings("div").html(feedback);
});

请记住,如果您将答案放在客户端代码中,那么他们可以看到它:)最好的方法是在服务器端验证它,但对于范围有限的应用程序,这可能不是问题.

3> Buu Nguyen..：

---

试试这个:

$("button").click(function () {
    $(this).parents("div:first").html(...);
});

4> Ashish Sajwa..：

---

$(this).parents('div').attr('id');

5> Pim Jager..：

---

要获取父div的id:

$(buttonSelector).parents('div:eq(0)').attr('id');

此外,您可以相当多地重构您的代码:

$('button').click( function() {
 var correct = Number($(this).attr('rel'));
 validate(Number($(this).siblings('input').val()), correct);
 $(this).parents('div:eq(0)').html(feedback);
});

现在不需要按钮类

解释
eq(0),意味着您将从jQuery对象中选择一个元素,在本例中为元素0,因此是第一个元素.http://docs.jquery.com/Selectors/eq#index
$(selector).siblings(siblingsSelector)将选择与siblingsSelector http://docs.jquery.com/Traversing匹配的所有兄弟(具有相同父元素的元素)/ siblings
#exp $(selector).parents(parentsSelector)将选择与父选择器匹配的选择器匹配的元素的所有父项.http://docs.jquery.com/Traversing/parents#expr
因此:$(selector).parents('div:eq(0)'); 将匹配选择器匹配的元素的第一个父div.

你应该看看jQuery文档,特别是选择器和遍历:

http://docs.jquery.com/

http://docs.jquery.com/Selectors

http://docs.jquery.com/Traversing

6> Jerin K Alex..：

---

http://jsfiddle.net/qVGwh/6/ 检查一下

   $("#MadonwebTest").click(function () {
    var id = $("#MadonwebTest").closest("div").attr("id");
    alert(id);
    });

7> 小智..：

---

这可以通过以下方式轻松完成:

$(this).closest('table').attr('id');

将它附加到表中的任何对象,它将返回该表的id.