jQuery: отримати батьківський, батьківський ідентифікатор?

80

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

Як я можу отримати ідентифікатор ul (myList) за допомогою jQuery? Моя подія j-script запускається при натисканні на посилання. Я намагався:

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

Але він отримує ідентифікатор li, мені потрібно піднятися на один вище, і я не можу прикріпити клацання до li.

jquery

— пантро
джерело

166

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

Це спосіб отримання ідентифікатора батьківського батька.

РЕДАГУВАТИ:

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

Це більш надійне рішення для вашої справи.

— Кейсі Фостер
джерело

1

покликання батьків. два рази не є ефективним, а не майбутнім доказом

— gotofritz

2

parent().parent()безумовно швидше, ніж, parents('ul')оскільки останній буде шукати весь шлях до тегу <html>, шукаючи теги <ul>, і повертати їх усі. closest('ul')є хорошим вибором, оскільки він припиняє пошук після першого входження, але найближчий також включає елемент, до якого його викликають. Можливо, $(this).parent().closest('ul')це найкращий вибір, якщо тільки $(this)ніколи не буде <ul>.

— Кейсі Фостер,

Погодились, що „найближчий” - ідеальний підхід. Спочатку цього не розумів, але будь-який селектор може працювати замість "ul".

— HoldOffHunger

13

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

— абхіджіт
джерело

0

Ось 3 приклади:

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

Розгорніть фрагмент

Повідомте мене, чи було це корисно.

— Юрай Гуніш
джерело