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.
Wie finde ich die ID des Div, der die Schaltfläche übergeordnet hat?
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!
1.
2.
Es muss viele Möglichkeiten geben! Man könnte ein Element ausblenden, das die Antwort enthält, z
Und dann haben Sie einen ähnlichen jQuery-Code wie oben, um das zu erfassen:
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.
quelle
$(parent[0]).attr('id')
ich das Ergebnis so umbrechen, nachdem ich einige übergeordnete Selektoren mochte.Versuche dies:
quelle
quelle
So erhalten Sie die ID des übergeordneten div:
Sie können Ihren Code auch einiges umgestalten:
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:
quelle
http://jsfiddle.net/qVGwh/6/ Überprüfen Sie dies
quelle
Dies kann leicht erreicht werden durch:
Sie hängen dies an ein beliebiges Objekt in einer Tabelle an und es gibt Ihnen die ID dieser Tabelle zurück.
quelle
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:
und
Sie sind sich nicht ganz sicher, wie Ihre Validierung und Ihr Feedback funktionieren, aber Sie haben die Idee.
quelle
find () und next () scheinen etwas langsamer zu sein als:
quelle
$(this).parent().parent().attr("id");
?