JQuery ile ilk “n” öğeleri seçme


217

Jquery ile, sayfadan sadece ilk "n" öğelerini seçmem gerekiyor, örneğin hepsini normal ile seçmek yerine ilk 20 bağlantıyı seçmem gerekiyor

$("a")

Kulağa basit geliyor ama jQuery kılavuzunun böyle bir şeye dair kanıtı yok.

Yanıtlar:


378

Muhtemelen dilim üzerinde okumak istiyorsunuz . Kodunuz şöyle görünecektir:

$("a").slice(0,20)

65
Gerçi :lt(20)yaklaşım çok daha temiz görünüyor, dilim kullanıyor çok Birlikte başlamak büyük bir sonuç kümesi varsa daha verimli. Ne yazık ki, ": lt" ve diğer konum seçicileri değerlendirirken, jQuery , sadece ilk öğeyi alsa bile , tüm kümeyi dolaşır. Bu konuda blogumda
nickf

1
Teşekkür ederim, isteğimin bir yan gereksinimi performanslar hakkındaydı, bu yüzden bu benim için doğru cevap. Diğerlerine de işaret ettikleri için teşekkürler: lt seçicisini de.
Omiod

3
@Nickf tarafından bilgilendirici bir yorum, ancak blog bağlantısı ve grafik bağlantısı çalışmıyor gibi görünüyor
Fractalf

1
Şimdi düzenleyemiyorum üzgünüm - temelde, dilim kullanmak çok daha hızlıydı.
nickf

92

Lt sözde seçici kullanın:

$("a:lt(n)")

Bu, nci olandan önceki elemanlarla eşleşir (n'inci eleman hariç tutulur). Numaralandırma 0'dan başlar.


13
JQuery Docs'a göre , .slice modern tarayıcılarda daha hızlıdır.
Blaise

1
JQuery stilinin kullanımını seviyorum, zincirlemekten daha zarif.
Fedir RYKHTIK

22

Bu notu lt () belgelerinin sonunda buldum :

Ek Notlar:
lt () bir jQuery uzantısı olduğundan ve CSS belirtiminin bir parçası olmadığından,: (() kullanan sorgular yerel DOM querySelectorAll () yöntemi tarafından sağlanan performans artışından yararlanamaz. Modern tarayıcılarda daha iyi performans için $ ("saf-css-selector"). Dilim (0, dizin) kullanın.

$("selector").slice(from, to)Daha iyi performanslar için kullanın .



7

.slice () her zaman daha iyi değildir. Benim durumumda, Chrome 36'da jQuery 1.7 ile .slice (0, 20) hatayla başarısız oldu:

RangeError: Maksimum çağrı yığını boyutu aşıldı

Şunu buldum: lt (20) bu durumda hatasız çalıştı. Muhtemelen on binlerce eşleşen öğem vardı.


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.