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

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

Разметка:

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

Script:

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

Ответ 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() возвращает все соответствующие элементы.

Ответ 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)

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

Это действительно зависит от того, чего вы хотите достичь. Вы хотите искать всех предков независимо от используемого класса? Или вы хотите искать все элементы, которые являются предками, и иметь определенный класс (предк-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(), пока вы не получите элемент с определенным идентификатором или классом. Это действительно зависит от того, что вы хотите сделать.