web-dev-qa-db-fra.com

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

J'ai du 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 certains JS aiment ç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 que si je n’avais pas à indiquer class = "1" sur le bouton (je sais que les classes numériques ne sont pas valides, mais c’est un WIP!), Je pourrais donc déterminer le boutonNon en fonction du id du parent div. Dans la vie réelle, il y a plusieurs sections ressemblant à ceci.

  1. Comment trouver l'id 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 qu'un non-programmeur puisse copier et coller sans casser des choses!

jquerydomsemantics
98
Rich Bradshaw

Vous pouvez utiliser délégation d’événement sur le div parent. Ou utilisez la méthode la 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");
210
Mark

1.

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

2.

Il doit y avoir un grand nombre de façons! On pourrait par exemple cacher un élément contenant 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 à ce qui précède 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 cela ne pose aucun problème pour une application dont l'étendue est limitée.

48
Robert Grant

Essaye ça:

$("button").click(function () {
    $(this).parents("div:first").html(...);
});
11
Buu Nguyen
$(this).parents('div').attr('id');
9
Ashish Sajwan

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);
});

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

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

Vous devriez jeter un coup d’œil aux docs jQuery, en particulier aux sélecteurs et traversants: 

7
Pim Jager

http://jsfiddle.net/qVGwh/6/ Cochez cette case

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

Cela peut être facilement fait en faisant:

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

Vous attachez ceci à n'importe quel objet dans une table et cela vous retournera l'id de cette table.

5
Hamid

JQUery dispose d'une méthode .parents () pour commencer l'arborescence DOM. 

Si cela vous intéresse de faire cela d'une manière plus sémantique, je ne pense pas que l'utilisation de l'attribut REL sur un bouton soit le meilleur moyen de définir sémantiquement "c'est la réponse" dans votre code. Je recommanderais quelque chose dans ce sens:

<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);
});

Vous ne savez pas très bien comment fonctionnent vos validations et vos commentaires, mais vous en avez une idée.

3
Parrots

find () et le plus proche () semblent légèrement plus lents que:

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