使用Jquery查找父div的id
我有这样的一些HTML：
<div id="1"> <p> Volume = <input type="text" /> <button rel="3.93e-6" class="1" type="button">Check answer</button> </p> <div></div> </div> 和这样的一些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。
必须有很多方法！ 一个可能是隐藏一个包含答案的元素，例如
<div> Volume = <input type="text" /> <button type="button">Check answer</button> <span style="display: hidden">3.93e-6</span> <div></div> </div>
然后有类似的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器和遍历：
http://jsfiddle.net/qVGwh/6/选中此项;
$("#MadonwebTest").click(function () { var id = $("#MadonwebTest").closest("div").attr("id"); alert(id); });
这可以很容易地做到这一点：
$(this).closest('table').attr('id');
您将它附加到表内的任何对象，它将返回该表的ID。
JQUery有一个.parents（）方法用于向上移动DOM树，您可以从那里开始。
如果你对这样做更有意思，我不认为在button上使用REL属性是在你的代码中语义定义“这就是答案”的最好方法。 我会推荐一些这方面的东西：
<p id="question1"> <label for="input1">Volume =</label> <input type="text" name="userInput1" id="userInput1" /> <button type="button">Check answer</button> <input type="hidden" id="answer1" name="answer1" value="3.93e-6" /> </p>
和
$("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");
