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