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

Question

J'ai quelques html comme ça :

<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 quelques JS comme ça :

$("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 de ne pas avoir besoin d'avoir le class="1" sur le bouton (je sais que les classes numériques ne sont pas valides, mais il s'agit d'un WIP !), et de pouvoir déterminer le buttonNo en fonction de l'id de la div parente. Dans la vie réelle, il y a plusieurs sections qui ressemblent à ceci.

1. Comment puis-je trouver l'id de la div parentale du bouton.

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

Answer 1

Vous pourriez utiliser délégation d'événements sur le div parent. Ou utilisez l'option le plus proche pour trouver le parent du bouton.

Le plus facile des deux est probablement le plus proche.

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

Answer 2

1.

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

2.

Il doit y avoir un grand nombre de moyens ! L'une d'elles pourrait être de cacher un élément qui contient la réponse, par ex.

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

Et ensuite avoir un code jQuery similaire au précédent pour le saisir :

$("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 d'y parvenir est de la valider côté serveur, mais pour une application de portée limitée, cela peut ne pas être un problème.

Answer 3

Essayez ça :

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

Answer 4

Pour obtenir l'id de la div parent :

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

En outre, vous pouvez remanier votre code de manière assez poussée :

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

Maintenant, il n'y a pas besoin d'une classe de boutons

explication
eq(0), signifie que vous allez sélectionner 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 éléments frères et sœurs (éléments ayant 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 correspondant au selector qui correspondent au selector parent. http://docs.jquery.com/Traversing/parents#expr
Ainsi : $(selector).parents('div:eq(0)') ; correspondra au premier div parent des éléments correspondant au sélecteur.

Vous devriez jeter un coup d'œil à la documentation de jQuery, en particulier aux sélecteurs et à la traversée :

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

Answer 5

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

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