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

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