JQuery выбрать предка

Question

Можно ли использовать jQuery для выбора предка элемента?

Markup:

<div id="ancestor-1">
    <div>
        <a href="#" class="click-me">Click me</a>
    </div>
</div>
<div id="ancestor-2">
    <div>
        <a href="#" class="click-me">Click me</a>
    </div>
</div>

Сценарий:

$(".click-me").click(function(){
    // var ancestorId = ???;
    alert(ancestorId)
});

Answer 1

Попробуйте parent() для непосредственного родительского элемента.

$(".click-me").click(function() {
  var ancestor = $(this).parent();
  alert(ancestor)
});

Или parents() для всех соответствующих элементов-предков.

$(".click-me").click(function() {
  var ancestors = $(this).parents(".some-ancestor");
  alert(ancestors)
});

Или closest() для первого ближайшего совпадающего элемента (предка или самого себя).

$(".click-me").click(function() {
  var ancestor = $(this).closest(".some-ancestor");
  alert(ancestor)
});

Разница между parents() и closest() невелика, но важна. closest() вернет текущий элемент, если это совпадение; parents() возвращает только предков . Вы много не хотите возможность возврата текущего элемента. closest() также возвращает только один элемент; parents() возвращает все соответствующие элементы.

Answer 2

Ты имеешь в виду что-то подобное?

$('.click-me').click(function() {
    var $theAncestor = $(this).closest('#ancestor-1');
}

Это будет искать всех предков, пока не будет найдено совпадение.

http://api.jquery.com/closest/

EDIT:

Джером, ваш вопрос можно интерпретировать несколькими способами. Это говорит о мощи и гибкости jQuery.

Пожалуйста, учтите следующее.

Во-первых, чтобы ответить на ваш вопрос, да, можно использовать jQuery для выбора предка элемента.

Я думаю, мы можем предположить, что вам известно о способности jQuery выбирать любой элемент, будь то предок или потомок, с помощью:

$('#myElement')

Учитывая пример click-me, если вы хотите, чтобы возвращался набор всех предков элемента, используйте:

$(this).parents()

или

$(this).parents(selector)

Но имейте в виду, что это будет проходить через ВСЕХ предков, возвращающих все или все, что совпадают, когда предоставляется селектор.

Если вы хотите вернуть ближайшего родителя, используйте:

$(this).parent()

Если вы знаете, какой предок вам нужен, используйте:

$(this).closest(selector)

Но имейте в виду, что он вернет только первое совпадение, и если текущий элемент (это) является совпадением, он вернет его.

Надеюсь, это поможет.

Answer 3

Попробуйте использовать parent () или closest () в сочетании, возможно, с селектором, чтобы определить, какой предок должен соответствовать. Например, найдите ближайший div предка с идентификатором.

$('.click-me').click( function() {
      var ancestorId = $(this).closest('div[id]');
      alert(ancestorId);
});

Answer 4

Это действительно зависит от того, чего вы хотите достичь. Вы хотите найти всех предков, независимо от используемого класса? Или вы хотите найти все элементы, которые являются предками и имеют определенный класс (ancestor-x в вашем случае)?

Если вы хотите переключаться между любыми предками, просто используйте .parent () (есть отличный пример, как циклически проходить по всем элементам) или .parents () , который вы используйте как:

$(".click-me").click(function(){
    var parentElements = $(this).parents().map(function () {
        return this.tagName;
    })
    // whatever else you want to do with it
});

Вероятно, лучшим подходом было бы использовать .parents(), пока вы не получите элемент с определенным идентификатором или классом. Это действительно зависит от того, что вы хотите сделать.

Answer 5

http://api.jquery.com/parent/ и http://api.jquery.com/parents/

$(".click-me").click(function(){
    var ancestorId = $(this).parent().parent();
    alert(ancestorId)
});

вернет div с идентификаторами

Answer 6

Вы ищете parent()? jQuery Doc для родительского селектора. Если для вашего сценария это не так, объясните, каков ваш ожидаемый результат.