JQuery, belirli sınıf önekine sahip ilk ana öğeyi bulur

124

Belirli bir sınıf öneki olan ilk ebeveyni almak istiyorum, varsayalım:

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

Örneğin, benim geçerli öğem #dividve sınıf öneki div-a olan ilk öğeyi bulmak istiyorum. Yani temelde şunları seçecektir:

<div class="div-a89892">

jquery jquery-selectors

— Zaman yolculuğu
kaynak

Dur. Bilgileri tek bir sınıfta birleştirmek yerine birden çok sınıf kullanın. 'Eşleştirme' seçici yavaştır ve bu tasarım herhangi bir değişiklik için ölçeklenmez. <div class='a'>, sonra kuralları sağlayın div.a. divAslında sınıf adını neden koyduğunuzu bilmiyorum .

— Stefan Kendall

Yine de verileri sınıf öneklerinde birleştirmeyin. Bu korkunç bir modeldir ve birden fazla sınıfla kolayca giderilebilir.

— Stefan Kendall

@StefanKendall: Bazen başkalarının üçüncü taraf saçmalıklarıyla uğraşıyorsunuz ve bazen hızlı bir şekilde düzeltemeyeceğiniz eski uygulamaları destekliyorsunuz. Kötü tasarım hayatın bir gerçeğidir ve bu tamamen meşru bir sorudur.

— Nerdmaster

Yanıtlar:

222

.closest()Bir seçici ile kullanın :

var $div = $('#divid').closest('div[class^="div-a"]');

— Matt Ball
kaynak

BTW, bunun neden reddedildiğine dair hiçbir fikrim yok. Sınıf-öneki seçici kırılgan, ama olacak çalışırlar.

— Matt Ball

OP için: Aradığınız öğenin, DOM ağacında bir yerde bir üst öğe olduğundan ve aradığınız nesnenin kardeşi veya benzeri olmadığından (belgelere göre) emin olun. "Belgede en yakın yere" değil, "DOM ağacını oluşturarak en yakın yere".

— Christian P.

Benim için çalışmıyor. Ayrıca, belirli bir öneki olan, bir div öğesi olması gerekmeyen ilk öğeyi bulmak istiyorum.

— Time Travel

@Time sonra çıkarın divelemanı seçici: $('#divid').closest('[class^="div-a"]'). @Stefan'ın da belirttiği gibi, gerçekten birden çok sınıf kullanıyor olmalısınız.

— Matt Ball

Bu seçici, saçma miktarda döngü alır (ancak yine de hızlı olabilir). IE6, IE7 veya IE8'i desteklemeniz gerekiyorsa, DOM'nuz çok büyük olursa bu gerçekten canınızı sıkabilir; IE, belirli sayıda JS VM talimatı yürütüldüğünde ve belirli bir süre sonra DEĞİL "komut dosyası yanıt vermiyor" iletişim kutusunu görüntüler. Tam da bu nedenle, 0.1 ms'de internet explorer'da tamamlanan betikler gördüm.

— Stefan Kendall

Jquery daha sonra ebeveynleri bu .parents()yöntemle bulmanızı sağladı .

Bu nedenle şunları kullanmanızı tavsiye ederim:

var $div = $('#divid').parents('div[class^="div-a"]');

Bu, seçici ile eşleşen tüm üst düğümleri verir. Seçici ile eşleşen ilk üst öğeyi almak için şunu kullanın:

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

Diğer tür DOM kastetmek sorguları için belgelerine kontrol DOM kateden .

— Güneşli R Gupta
kaynak

Cevap yanıltıcı değil, sadece .closest (), .parents () 'a başka bir alternatif gösteriyor daha okunabilir görünüyor ve sorunun başka bir çözümü.

— Sunny R Gupta

En yakın olan, bundan daha iyi bir çözümdür çünkü en yakın kişi ilk eşleşmeyi bulacaktır, oysa ebeveynler DOM'da yukarı giden TÜM eşleşmeleri bulacaktır. Açıkçası en yakını kullanmak daha verimli, ancak kabul etsem de, en iyi adlandırılmış işlev değil.

— Mog0

Yeterince komik, bu çözümü .parentsUtil () beklediğim gibi çalışmadığı için kullandım.

— Mark Handy