jquery查找父窗体id_使用Jquery查找父div的id

使用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); });

我真的很喜欢的是，如果我没有button上的类=“1”(我知道数字类是无效的，但这是一个WIP！)，所以我可以确定buttonNo基于父div的ID。 在现实生活中有多个部分看起来像这样。

如何find父母button的div的id。

在button代码中存储答案的语义方式是什么？ 我想尽可能地让这个非程序员复制粘贴而不会破坏事情！

你可以在父div上使用事件委托 。 或者使用最接近的方法来查找button的父级。

最容易的两个可能是最接近的。

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

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); });

请记住，如果你把答案放在客户端代码，那么他们可以看到它:)最好的办法是validation它在服务器端，但对于范围有限的应用程序，这可能不成问题。

尝试这个：

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

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

要得到父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); });

现在不需要button类了

说明

eq(0)意味着你将从jQuery对象中select一个元素，在这个例子中是元素0，因此是第一个元素。 http://docs.jquery.com/Selectors/eq#index

$(selector).siblings(siblingsSelector)将select所有兄弟姐妹(具有相同父母的元素)，它们与兄弟姐妹select器http://docs.jquery.com/Traversing/siblings#expr

$(selector).parents(parentsSelector)将select匹配父select器的匹配元素的所有父项。 http://docs.jquery.com/Traversing/parents#expr

因此：$(selector).parents('div：eq(0)'); 将匹配select器匹配的元素的第一个父div。

你应该看看jQuery文档，特别是select器和遍历：

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

这可以很容易地做到这一点：

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

您将它附加到表内的任何对象，它将返回该表的ID。

JQUery有一个.parents()方法用于向上移动DOM树，您可以从那里开始。

如果你对这样做更有意思，我不认为在button上使用REL属性是在你的代码中语义定义“这就是答案”的最好方法。 我会推荐一些这方面的东西：

Volume = Check answer

和

$("button").click(function () { var correctAnswer = $(this).parent().siblings("input[type=hidden]").val(); var userAnswer = $(this).parent().siblings("input[type=text]").val(); validate(userAnswer, correctAnswer); $("#messages").html(feedback); });

不太确定你的validation和反馈是如何工作的，但你明白了。

find()和nearest()似乎比稍慢一些：

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