Trouver l'id d'un div parent à l'aide de Jquery

J'ai du HTML comme celui-ci:

<div id="1">
    <p>
        Volume = <input type="text" />
        <button rel="3.93e-6" class="1" type="button">Check answer</button>
    </p>
    <div></div>
</div>

et certains JS comme ceci:

$("button").click(function () {
    var buttonNo = $(this).attr('class');
    var correct = Number($(this).attr('rel'));

    validate (Number($("#"+buttonNo+" input").val()),correct);
    $("#"+buttonNo+" div").html(feedback);
});

Ce que j'aimerais vraiment, c'est que je n'ai pas besoin d'avoir la classe = "1" sur le bouton (je sais que les classes numériques ne sont pas valides, mais c'est un WIP!), Afin que je puisse déterminer buttonNo en fonction de la id de la div parent. Dans la vraie vie, plusieurs sections ressemblent à ceci.

1. Comment puis-je trouver l'identifiant du div parenting le bouton.

2. Quelle serait une manière plus sémantique de stocker la réponse dans le code du bouton. Je veux rendre cela aussi infaillible que possible pour un non programmeur de copier et coller sans casser les choses!

Vous pouvez utiliser la délégation d'événements sur le div parent. Ou utilisez la méthode la plus proche pour trouver le parent du bouton.

Le plus simple des deux est probablement le plus proche.

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

1.

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

2.

Il doit y avoir un grand nombre de façons! L'un pourrait être de cacher un élément qui contient la réponse, par exemple

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

Et puis avoir un code jQuery similaire à celui ci-dessus pour saisir cela:

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

gardez à l'esprit que si vous mettez la réponse dans le code client, ils peuvent la voir :) La meilleure façon de le faire est de la valider côté serveur, mais pour une application avec une portée limitée, cela peut ne pas poser de problème.

Essaye ça:

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

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

Pour obtenir l'id du div parent:

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

En outre, vous pouvez refactoriser votre code un peu:

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

Désormais, il n'y a plus besoin d'une classe de boutons

explication
eq (0), signifie que vous sélectionnerez un élément de l'objet jQuery, dans ce cas l'élément 0, donc le premier élément. http://docs.jquery.com/Selectors/eq#index
$ (selector) .siblings (siblingsSelector) sélectionnera tous les frères et sœurs (éléments avec le même parent) qui correspondent au siblingsSelector http://docs.jquery.com/Traversing / siblings # expr
$ (selector) .parents (parentsSelector) sélectionnera tous les parents des éléments mis en correspondance par le sélecteur qui correspondent au sélecteur parent. http://docs.jquery.com/Traversing/parents#expr
Ainsi: $ (selector) .parents ('div: eq (0)'); correspondra au premier div parent des éléments mis en correspondance avec le sélecteur.

Vous devriez jeter un œil à la documentation jQuery, en particulier les sélecteurs et la traversée:

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

http://jsfiddle.net/qVGwh/6/ Vérifiez ceci

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

Cela peut être facilement fait en faisant:

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

Vous attachez ceci à n'importe quel objet à l'intérieur d'une table et il vous renverra l'id de cette table.

JQUery a une méthode .parents () pour remonter dans l'arborescence DOM, vous pouvez commencer là.

Si vous êtes intéressé à faire cela d'une manière plus sémantique, je ne pense pas que l'utilisation de l'attribut REL sur un bouton soit la meilleure façon de définir sémantiquement «c'est la réponse» dans votre code. Je recommanderais quelque chose du genre:

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

et

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

Je ne sais pas trop comment votre validation et vos commentaires fonctionnent, mais vous comprenez l'idée.

find () et plus proche () semble légèrement plus lent que:

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