JQuery'de bir öğenin n. Düzey üst öğesini nasıl edinebilirim?

Örneğin almak istediğim öğenin 3. seviye üst öğesini almak istediğimde Bunun için $('#element').parent().parent().parent()daha uygun bir yöntem var mı?

Yana veliler () dış olanlardan en yakın sipariş atası elemanlarını döndürür sen içine zincir olabilir ) (eq :

$('#element').parents().eq(0);  // "Father".
$('#element').parents().eq(2);  // "Great-grandfather".

İhtiyaçlarınıza bağlı olarak, hangi üst öğeyi aradığınızı biliyorsanız .parents () seçiciyi kullanabilirsiniz.

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());

Dizin kullanan örnek:

//First parent - 2 levels up from #Four
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);

alert($(topTwo ).html());

Hedef üst öğeye bir kimlik veya sınıf (ör. MyParent) verebilirsiniz ve başvuru $('#element').parents(".myParent")

Daha hızlı bir yol, javascript'i doğrudan kullanmaktır, örn.

var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);

Bu, tarayıcımda jQuery .parent()çağrılarını zincirlemekten çok daha hızlı çalışır .

Bkz. Http://jsperf.com/jquery-get-3rd-level-parent

Kullanarak herhangi bir cevap bulamadım closest() ve gerekli öğenin kaç seviye olduğunu bilmediğinizde en basit cevap olduğunu düşünüyorum, bu yüzden bir cevap gönderme: Eşleşen ilk öğeyi almak için seçicilerle birlikte işlevi
kullanabilirsiniz closest()elemandan yukarı doğru hareket ederken:

('#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'

Basit. Sadece kullan

$(selector).parents().eq(0); 

burada 0 üst düzeydir (0 üst öğedir, 1 üst öğenin üst öğesidir vb.)

Sadece :eq()böyle bir seçici ekleyin :

$("#element").parents(":eq(2)")

Sadece hangi üst dizini belirlersiniz: hemen üst ebeveyn için 0, büyük ebeveyn için 1, ...

Bu işlevi yeniden kullanmayı planlıyorsanız, en uygun çözüm bir jQuery eklentisi yapmaktır:

(function($){
$.fn.nthParent = function(n){
  var $p = $(this);
  while ( n-- >= 0 )
  {
    $p = $p.parent();
  }
  return $p;
};
}(jQuery));

Tabii ki, isteğe bağlı bir seçiciye ve diğer şeylere izin vermek için genişletmek isteyebilirsiniz.

Bir not: bu, 0ebeveynler için temel bir dizin kullanır , bu nedenle nthParent(0)arama ile aynıdır parent(). 1Temel dizin oluşturmayı tercih ediyorsanız ,n-- > 0

Ortak bir ana div'iniz varsa parentUntil () bağlantısını kullanabilirsiniz

Örneğin: $('#element').parentsUntil('.commonClass')

Avantajı, bu öğe ile ortak ebeveyn (ortak sınıf tarafından tanımlanır) arasında kaç nesil olduğunu hatırlamanıza gerek olmamasıdır.

Ayrıca kullanabilirsiniz :

$(this).ancestors().eq(n) 

örnek: $(this).ancestors().eq(2)-> öğesinin üst öğesinin üst öğesi this.

Bunun gibi bir şey kullanabilirsiniz:

(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"));

http://jsfiddle.net/Xeon06/AsNUu/

eq kullanmak dinamik DOM'u yakalarken, .parent (). parent () kullanmak başlangıçta yüklenmiş olan DOM'u (hatta mümkünse) kapmak gibi görünür.

Her ikisini de sınıfları büyük ölçüde uygulayan bir öğede kullanıyorum. eq sınıfları .parent (). parent () göstermezken gösterir.

Gibi ebeveynler () listesini döndürür, bu da çalışır

$('#element').parents()[3];