使用Jquery找到父div的id。

I have some html like this:

我有一些这样的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>

and some JS like this:

还有一些像这样的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);
});

What I'd really like is if I didn't have to have the class="1" on the button (I know numeric classes aren't valid, but this is a WIP!), so I could determine buttonNo based on the id of the parent div. In real life there are multiple sections looking like this.

我真正想要的是，如果我不需要在按钮上设置class="1"(我知道数字类是无效的，但这是一个WIP!)，所以我可以根据父div的id来确定buttonNo。

1. How do I find the id of the div parenting the button.

   我怎样才能找到这个按钮的父div的id。

2. What would be a more semantic way to store the answer in the button code. I want to make this as foolproof as possible for a non programmer to copy and paste without breaking things!

   在按钮代码中存储答案的更语义的方法是什么?我想让它尽可能的简单，让一个非程序员在不破坏东西的情况下复制粘贴。

9 个解决方案

#1

You could use event delegation on the parent div. Or use the closest method to find the parent of the button.

您可以在父div中使用事件委托，或者使用最接近的方法来找到按钮的父元素。

The easiest of the two is probably the closest.

两者中最简单的可能是最接近的。

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

#2

1.

1。

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

2.

2。

There must be a large number of ways! One could be to hide an element that contains the answer, e.g.

一定有很多方法!一个可以隐藏包含答案的元素，例如。

<div>
    Volume = <input type="text" />
    <button type="button">Check answer</button>
    <span style="display: hidden">3.93e-6&lt;/span>
    <div></div>
</div>

And then have similar jQuery code to the above to grab that:

然后使用类似的jQuery代码来获取:

$("button").click(function () 
{
    var correct = Number($(this).parent().children("span").text());
    validate ($(this).siblings("input").val(),correct);
    $(this).siblings("div").html(feedback);
});

bear in mind that if you put the answer in client code then they can see it :) The best way to do this is to validate it server-side, but for an app with limited scope this may not be a problem.

请记住，如果您将答案放入客户端代码中，那么他们可以看到:)最好的方法是验证它的服务器端，但是对于一个范围有限的应用程序来说，这可能不是问题。

#3

Try this:

试试这个:

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

#4

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

#5

To get the id of the parent div:

获取父div的id:

$(buttonSelector).parents('div:eq(0)').attr('id');

Also, you can refactor your code quite a bit:

此外，您可以稍微重构您的代码:

$('button').click( function() {
 var correct = Number($(this).attr('rel'));
 validate(Number($(this).siblings('input').val()), correct);
 $(this).parents('div:eq(0)').html(feedback);
});

Now there is no need for a button-class

现在不需要纽扣类了。

explanation
eq(0), means that you will select one element from the jQuery object, in this case element 0, thus the first element. http://docs.jquery.com/Selectors/eq#index
$(selector).siblings(siblingsSelector) will select all siblings (elements with the same parent) that match the siblingsSelector http://docs.jquery.com/Traversing/siblings#expr
$(selector).parents(parentsSelector) will select all parents of the elements matched by selector that match the parent selector. http://docs.jquery.com/Traversing/parents#expr
Thus: $(selector).parents('div:eq(0)'); will match the the first parent div of the elements matched by selector.

说明eq(0)，意味着您将从jQuery对象中选择一个元素，在本例中为0，因此是第一个元素。兄弟姐妹(siblingsSelector)将选择与siblingsSelector http://docs.jquery.com/traversing/# expr $(选择器)匹配的所有兄弟姐妹(元素)。父母(parentsSelector)将选择与父选择器匹配的所有元素的父元素。http://docs.jquery.com/Traversing/parents expr:$(选择).parents(div:eq(0));将匹配选择器匹配的元素的第一个父div。

You should have a look at the jQuery docs, particularly selectors and traversing:

您应该看看jQuery文档，特别是选择器和遍历:

• http://docs.jquery.com/
• http://docs.jquery.com/
• http://docs.jquery.com/Selectors
• http://docs.jquery.com/Selectors
• http://docs.jquery.com/Traversing
• http://docs.jquery.com/Traversing

#6

http://jsfiddle.net/qVGwh/6/ Check this

http://jsfiddle.net/qVGwh/6/检查这个

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

#7

This can be easily done by doing:

这很容易做到:

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

You attach this to any object inside a table and it will return you the id of that table.

将其附加到表中的任何对象，它将返回该表的id。

#8

JQUery has a .parents() method for moving up the DOM tree you can start there.

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

If you're interested in doing this a more semantic way I don't think using the REL attribute on a button is the best way to semantically define "this is the answer" in your code. I'd recommend something along these lines:

如果你有兴趣这么做的话，我不认为在按钮上使用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>

and

和

$("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);
});

Not quite sure how your validate and feedback are working, but you get the idea.

不太确定您的验证和反馈是如何工作的，但是您可以理解这个想法。

#9

find() and closest() seems slightly slower than:

find()和最近的()似乎比:

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