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