Ermitteln der ID eines übergeordneten Div mithilfe von Jquery

99

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!

Rich Bradshaw
quelle

Antworten:

212

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");
Kennzeichen
quelle
6
Ich mag es am liebsten, weil Sie so etwas wie .closest ("div.foo") machen können und Code nicht an die Struktur gebunden ist.
Mark
2
Thx ich wollte gerade eine rekursive Funktion ausführen ... dann wusste ich, dass jquery schon etwas hatte ... in meinem Fall habe ich $ ("#" + id) .closest ("div.form-group") verwendet, um die zu finden Eltern-Div, der die Form-Group-Klasse hatte.
cabaji99
47

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.

Rob Grant
quelle
Ich habe keine Ahnung, wie HTML in diesem Editor formatiert werden soll, aber dies scheint eine einfachere Möglichkeit zu sein, das übergeordnete Element zu erfassen, als Pims ('div: eq (0)') Zeug; Wenn mir hier keine Subtilität fehlt, haben alle HTML-Elemente ein direktes übergeordnetes Element, das Sie nur mit parent () erhalten.
Rob Grant
Der Elternteil wird in der Tat den nächsten Elternteil zurückgeben. Was passiert jedoch, wenn er entscheidet, dass er ein Feldset oder etwas um die Frage herum hinzufügen möchte, aber innerhalb der Div.
Pim Jager
In seinem eigenen Beispiel wird dies den <p>
Pim Jager
In der Tat könnte das 'div: eq (0)' falsch sein, wenn mehr divs hinzugefügt werden. Ändern Sie die Struktur, ändern Sie den Code, der sie analysiert :) Und ja, ich habe das Beispiel auf das für das Beispiel erforderliche Mindest-HTML vereinfacht. es sollte Eltern zweimal anrufen.
Rob Grant
Aus irgendeinem Grund, als ich parent () verwendete, konnte ich nicht auf attr (id) zugreifen, musste $(parent[0]).attr('id')ich das Ergebnis so umbrechen, nachdem ich einige übergeordnete Selektoren mochte.
Piotr Kula
11

Versuche dies:

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

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:

Pim Jäger
quelle
Simpel und einfach! Warum die div: eq (0)? Was soll das heißen?
Rich Bradshaw
Ich denke, die 'div: eq (0)' ist falsch, wenn dies alles in mindestens eine div eingeschlossen ist, weil Sie eine absolute Durchquerung des DOM durchführen und keine relative. Was in Ordnung wäre, wenn das erste Element das "engste" Elternteil wäre, aber dies deutet auf etwas anderes hin: tinyurl.com/bbegow
Rob Grant
1
(daher meine Verwendung von parent () stattdessen)
Rob Grant
6

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

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

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.

Hamid
quelle
3

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.

Papageien
quelle
0

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

$(this).parent().attr("id");
Krise
quelle
$(this).parent().parent().attr("id");?
Alejandro Iván