it-swarm.com.de

Ermitteln der ID eines übergeordneten div mit 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 wie folgt:

$("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!) id des übergeordneten div. Im wirklichen Leben gibt es mehrere Abschnitte, die so aussehen.

  1. Wie finde ich die ID des Divs, das die Schaltfläche enthält.

  2. Was wäre eine semantischere Methode, um die Antwort im Tastencode zu speichern. Ich möchte das so einfach wie möglich machen, damit ein Nicht-Programmierer kopieren und einfügen kann, ohne die Dinge zu zerbrechen!

98
Rich Bradshaw

Sie könnten event delegation für das übergeordnete div verwenden. Oder verwenden Sie die Methode close , 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");
210
Mark

1.

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

2.

Es muss viele Wege 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:

$("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 die Antwort in den Client-Code eingefügt wird, damit sie sie sehen können. Die beste Möglichkeit, dies zu tun, ist die serverseitige Validierung, aber für eine App mit eingeschränktem Umfang ist dies möglicherweise kein Problem.

48
Robert Grant

Versuche dies:

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

Um die ID des übergeordneten div zu erhalten:

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

Sie können Ihren Code auch ziemlich viel ändern:

$('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 nötig

erläuterung
eq (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) .sibibles (GeschwisterSelector) wählt alle Geschwister (Elemente mit demselben übergeordneten Element) aus, die mit dem GeschwisterSelector http://docs.jquery.com/Traversing/siblings#expr übereinstimmen.
$ (Selektor). eltern (ParentsSelector) wählt alle übergeordneten Elemente der Elemente aus, die mit dem Selektor übereinstimmen, die 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 Traversen: 

7
Pim Jager

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

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

Dies kann auf einfache Weise durchgeführt werden:

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

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

5
Hamid

JQUery verfügt über eine .parents () -Methode, mit der Sie den DOM-Baum nach oben verschieben können. 

Wenn Sie Interesse an einer semantischeren Methode haben, denke ich nicht, dass die Verwendung des REL-Attributs für eine Schaltfläche der beste Weg ist, um "dies ist die Antwort" in Ihrem Code semantisch zu definieren. Ich würde etwas in dieser 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 Bestätigung und Ihr Feedback funktionieren, aber Sie bekommen die Idee.

3
Parrots

find () und close () scheint etwas langsamer als:

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