Quando eu quero obter, por exemplo, o pai do terceiro nível do elemento que devo escrever $('#element').parent().parent().parent()
Existe um método mais ideal para isso?
Quando eu quero obter, por exemplo, o pai do terceiro nível do elemento que devo escrever $('#element').parent().parent().parent()
Existe um método mais ideal para isso?
Respostas:
Como parents () retorna os elementos ancestrais ordenados do mais próximo ao externo, você pode encadeá-lo no eq () :
$('#element').parents().eq(0); // "Father".
$('#element').parents().eq(2); // "Great-grandfather".
$('.element').first().parents().eq(num);
[2]
retornará o elemento DOM subjacente, using eq(2)
retornará um objeto jQuery.
Depende de suas necessidades, se você souber qual pai está procurando, poderá usar o seletor .parents ().
EG: http://jsfiddle.net/HenryGarle/Kyp5g/2/
<div id="One">
<div id="Two">
<div id="Three">
<div id="Four">
</div>
</div>
</div>
</div>
var top = $("#Four").parents("#One");
alert($(top).html());
Exemplo usando índice:
//First parent - 2 levels up from #Four
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);
alert($(topTwo ).html());
Você pode dar ao pai de destino um ID ou classe (por exemplo, myParent) e a referência é com $('#element').parents(".myParent")
Uma maneira mais rápida é usar o javascript diretamente, por exemplo.
var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);
Isso funciona significativamente mais rápido no meu navegador do que encadear .parent()
chamadas jQuery .
Não encontrei nenhuma resposta usando closest()
e acho que é a resposta mais simples quando você não sabe quantos níveis estão acima do elemento necessário, portanto, postando uma resposta:
Você pode usar a closest()
função combinada com seletores para obter o primeiro elemento correspondente ao percorrer o elemento para cima:
('#element').closest('div') // returns the innermost 'div' in its parents
('#element').closest('.container') // returns innermost element with 'container' class among parents
('#element').closest('#foo') // returns the closest parent with id 'foo'
É simples. Apenas use
$(selector).parents().eq(0);
onde 0 é o nível pai (0 é pai, 1 é pai etc)
Basta adicionar o :eq()
seletor como este:
$("#element").parents(":eq(2)")
Você acabou de especificar o índice que pai: 0 para pai imediato, 1 para pai principal, ...
Se você planeja reutilizar essa funcionalidade, a solução ideal é criar um plug-in jQuery:
(function($){
$.fn.nthParent = function(n){
var $p = $(this);
while ( n-- >= 0 )
{
$p = $p.parent();
}
return $p;
};
}(jQuery));
Obviamente, convém estendê-lo para permitir um seletor opcional e outras coisas.
Uma observação: isso usa um 0
índice baseado para os pais, nthParent(0)
o mesmo que chamar parent()
. Se você preferir ter uma 1
indexação baseada, usen-- > 0
var p = 1 + n; while (p--) { $p = $p.parent(); }
e se você quer mudar para uma base, Javascript sendo "Falsey" você pode usar: while (n--) { $p = $p.parent();}
salvar uma verificação condicional
nthParent(-2)
? Seu exemplo está quebrado.
(function($) { $.fn.nthParent = function(n) { return $(this).parents().eq(n); }; }(jQuery));
parents
qual estará incorreto para seleções com mais de um elemento.
var p = n >? (1 + n):1;
retornaria o primeiro pai nesse caso, em vez de "nada" - ou onde ele interrompe o loop no meu exemplo. ASSIM, provavelmente deveria ser: (function($) { $.fn.nthParent = function(n) { var $p = $(this); if (!(n > -0)) { return $() }; var p = 1 + n; while (p--) { $p = $p.parent(); } return $p; }; }(jQuery));
se você não quiser retornar nada.
Se você tem uma div pai comum, pode usar o link parentsUntil ()
por exemplo: $('#element').parentsUntil('.commonClass')
A vantagem é que você não precisa se lembrar de quantas gerações existem entre esse elemento e o pai comum (definido pela classe comum).
você também pode usar :
$(this).ancestors().eq(n)
ex: $(this).ancestors().eq(2)
-> o pai do pai de this
.
Você poderia usar algo como isto:
(function($) {
$.fn.parentNth = function(n) {
var el = $(this);
for(var i = 0; i < n; i++)
el = el.parent();
return el;
};
})(jQuery);
alert($("#foo").parentNth(2).attr("id"));
o uso de eq parece capturar o DOM dinâmico, enquanto o uso de .parent (). parent () parece capturar o DOM que foi carregado inicialmente (se isso for possível).
Eu uso os dois em um elemento que tem classes aplicado em onmouseover. eq mostra as classes enquanto .parent (). parent () não.
Como parents () retorna uma lista, isso também funciona
$('#element').parents()[3];