Ermitteln der ID eines übergeordneten Div mithilfe von Jquery

Ich habe ein HTML wie dieses:

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

und einige JS mögen das:

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

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

Was ich wirklich gerne hätte, wäre, wenn ich nicht die Klasse = "1" auf der Schaltfläche haben müsste (ich weiß, dass numerische Klassen nicht gültig sind, aber dies ist ein WIP!), Damit ich buttonNo basierend auf der Schaltfläche bestimmen kann ID des übergeordneten Div. Im wirklichen Leben gibt es mehrere Abschnitte, die so aussehen.

1. Wie finde ich die ID des Div, der die Schaltfläche übergeordnet hat?

2. Was wäre eine semantischere Möglichkeit, die Antwort im Schaltflächencode zu speichern? Ich möchte dies so kinderleicht wie möglich gestalten, damit ein Nicht-Programmierer es kopieren und einfügen kann, ohne Dinge zu beschädigen!

Sie können die Ereignisdelegierung für das übergeordnete div verwenden. Oder verwenden Sie die nächstgelegene Methode, um das übergeordnete Element der Schaltfläche zu finden.

Der einfachste von beiden ist wahrscheinlich der nächste.

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

1.

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

2.

Es muss viele Möglichkeiten geben! Man könnte ein Element ausblenden, das die Antwort enthält, z

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

Und dann haben Sie einen ähnlichen jQuery-Code wie oben, um das zu erfassen:

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

Denken Sie daran, dass sie die Antwort sehen können, wenn Sie sie in den Client-Code einfügen :) Der beste Weg, dies zu tun, besteht darin, sie serverseitig zu validieren. Für eine App mit begrenztem Umfang ist dies jedoch möglicherweise kein Problem.

Versuche dies:

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

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

So erhalten Sie die ID des übergeordneten div:

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

Sie können Ihren Code auch einiges umgestalten:

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

Jetzt ist keine Button-Klasse mehr erforderlich

Erklärung
Gleichung (0) bedeutet, dass Sie ein Element aus dem jQuery-Objekt auswählen, in diesem Fall Element 0, also das erste Element. http://docs.jquery.com/Selectors/eq#index
$ (Selektor). Geschwister (GeschwisterSelector) wählt alle Geschwister (Elemente mit demselben übergeordneten Element) aus, die mit dem GeschwisterSelector http://docs.jquery.com/Traversing übereinstimmen / Geschwister # expr
$ (Selektor) .parents (parentSelector) wählt alle Eltern der Elemente aus, die mit dem Selektor übereinstimmen und mit dem übergeordneten Selektor übereinstimmen. http://docs.jquery.com/Traversing/parents#expr
Also: $ (Selektor) .parents ('div: eq (0)'); stimmt mit dem ersten übergeordneten Div der Elemente überein, die mit dem Selektor übereinstimmen.

Sie sollten sich die jQuery-Dokumente ansehen, insbesondere Selektoren und Traversing:

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

http://jsfiddle.net/qVGwh/6/ Überprüfen Sie dies

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

Dies kann leicht erreicht werden durch:

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

Sie hängen dies an ein beliebiges Objekt in einer Tabelle an und es gibt Ihnen die ID dieser Tabelle zurück.

JQUery verfügt über eine .parents () -Methode zum Verschieben des DOM-Baums, den Sie dort starten können.

Wenn Sie daran interessiert sind, dies semantischer zu tun, ist die Verwendung des REL-Attributs auf einer Schaltfläche meiner Meinung nach nicht die beste Möglichkeit, "dies ist die Antwort" in Ihrem Code semantisch zu definieren. Ich würde etwas in diese Richtung empfehlen:

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

und

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

Sie sind sich nicht ganz sicher, wie Ihre Validierung und Ihr Feedback funktionieren, aber Sie haben die Idee.

find () und next () scheinen etwas langsamer zu sein als:

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