我有一些像这样的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);
});
我真正喜欢的是如果我没有按钮上的class =“1”(我知道数字类无效,但这是一个WIP!),所以我可以确定buttonNo基于父div的id。在现实生活中,有多个部分看起来像这样。
如何找到按钮的div的id。
在按钮代码中存储答案的更具语义的方法是什么。我想让非程序员尽可能地做到这一点,以便复制和粘贴而不会破坏东西!
答案 0 :(得分:210)
您可以在父div上使用event delegation。或者使用closest方法查找按钮的父级。
两者中最容易的可能是最接近的。
var id = $("button").closest("div").prop("id");
答案 1 :(得分:48)
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);
});
请记住,如果您将答案放在客户端代码中,那么他们可以看到它:)最好的方法是在服务器端验证它,但对于范围有限的应用程序,这可能不是问题。
答案 2 :(得分:11)
试试这个:
$("button").click(function () {
$(this).parents("div:first").html(...);
});
答案 3 :(得分:9)
$(this).parents('div').attr('id');
答案 4 :(得分:7)
获取父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#expr匹配的所有兄弟节点(具有相同父节点的元素)
$(selector).parents(parentsSelector)将选择与父选择器匹配的选择器匹配的元素的所有父项。 http://docs.jquery.com/Traversing/parents#expr
因此:$(selector).parents('div:eq(0)');将匹配选择器匹配的元素的第一个父div。
你应该看看jQuery文档,特别是选择器和遍历:
答案 5 :(得分:6)
http://jsfiddle.net/qVGwh/6/ 检查一下
$("#MadonwebTest").click(function () {
var id = $("#MadonwebTest").closest("div").attr("id");
alert(id);
});
答案 6 :(得分:5)
这可以通过以下方式轻松完成:
$(this).closest('table').attr('id');
您将此附加到表格内的任何对象,它将返回该表格的ID。
答案 7 :(得分:3)
JQUery有一个.parents()方法可以启动你可以从那里开始的DOM树。
如果您有兴趣以更加语义的方式执行此操作,我不认为在按钮上使用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);
});
不太确定您的验证和反馈是如何运作的,但您明白了。
答案 8 :(得分:0)
find()和nearest()似乎比:
稍慢$(this).parent().attr("id");