Finding the id of a parent div using Jquery

问题

I have some html like this:

<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:

$(\"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.

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

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!

回答1:

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

The easiest of the two is probably the closest.

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

回答2:

1.

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

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:

$("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:

$(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.

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

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

回答6:

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

   $("#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.

回答8:

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

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:

<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:

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

来源：https://stackoverflow.com/questions/545978/finding-the-id-of-a-parent-div-using-jquery