jQuery: Eltern, Eltern-ID abrufen?

79 
<ul id ="myList">
<li><a href="www.example.com">link</a></li>
</ul>

Wie kann ich die ID der ul (myList) mit jQuery abrufen? Mein J-Script-Ereignis wird ausgelöst, wenn auf einen Link geklickt wird. Ich habe versucht:

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

Aber es bekommt die ID des Li, ich muss einen höher gehen, und ich kann den Klick auch nicht an das Li anhängen.

jquery panthro
quelle

Antworten:

166 
$(this).parent().parent().attr('id');

So erhalten Sie die ID des Elternteils des Elternteils.

BEARBEITEN:

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

Ist eine narrensichere Lösung für Ihren Fall.

Casey Foster
quelle
1
Eltern anrufen. zweimal ist weder effizient noch zukunftssicher
gotofritz
2
parent().parent()ist definitiv schneller als, parents('ul')da letzterer bis zum <html> -Tag nach <ul>-Tags sucht und alle zurückgibt. closest('ul')ist eine gute Wahl, da die Suche nach dem ersten Auftreten beendet wird, das nächste jedoch auch das Element enthält, auf das es aufgerufen wird. Vielleicht $(this).parent().closest('ul')ist es die beste Wahl, es sei denn, das $(this)wird niemals ein <ul> sein.
Casey Foster
Einverstanden, dass "am nächsten" der ideale Ansatz ist. Ich habe es zuerst nicht bemerkt, aber jeder Selektor kann anstelle von 'ul' arbeiten.
HoldOffHunger
13 
 $(this).closest('ul').attr('id');
abhijit
quelle
0

Hier sind 3 Beispiele:

$(document).on('click', 'ul li a', function (e) {
    e.preventDefault();

    var example1 = $(this).parents('ul:first').attr('id');
    $('#results').append('<p>Result from example 1: <strong>' + example1 + '</strong></p>');

    var example2 = $(this).parents('ul:eq(0)').attr('id');
    $('#results').append('<p>Result from example 2: <strong>' + example2 + '</strong></p>');
  
    var example3 = $(this).closest('ul').attr('id');
    $('#results').append('<p>Result from example 3: <strong>' + example3 + '</strong></p>');
  
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id ="myList">
  <li><a href="www.example.com">Click here</a></li>
</ul>

<div id="results">
  <h1>Results:</h1>
</div>
Erweitern Sie das Snippet

Lassen Sie mich wissen, ob es hilfreich war.

Juraj Guniš
quelle