使用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。 在现实生活中有多个部分看起来像这样。

  1. 如何find父母button的div的id。

  2. 在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&lt;/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");