jQuery: get parent, parent id?

80

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

¿Cómo puedo obtener la identificación de ul (myList) usando jQuery? Mi evento j-script se activa cuando se hace clic en un enlace. Yo he tratado:

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

Pero obtiene la identificación del li, necesito ir uno más alto y tampoco puedo adjuntar el clic al li.

jquery

— panthro
fuente

166

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

Es cómo obtendría la identificación del padre del padre.

EDITAR:

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

Es una solución más infalible para su caso.

— Casey Foster
fuente

1

llamando a los padres. dos veces no es ni eficiente ni a prueba de futuro

— gotofritz

2

parent().parent()es definitivamente más rápido que, parents('ul')ya que este último buscará hasta la etiqueta <html> buscando etiquetas <ul> y las devolverá todas. closest('ul')es una buena opción porque deja de buscar después de la primera aparición, pero más cercano también incluye el elemento al que se llama. Quizás $(this).parent().closest('ul')sea la mejor opción, a menos $(this)que nunca sea un <ul>.

— Casey Foster

Estuvo de acuerdo en que "más cercano" es el enfoque ideal. No me di cuenta al principio, pero cualquier selector puede funcionar en lugar de 'ul'.

— HoldOffHunger

13

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

— abhijit
fuente

0

Aquí tienes 3 ejemplos:

$(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>

Expandir fragmento

Hágame saber si fue útil.

— Juraj Guniš
fuente