Jquery seçici girişi [tür = metin] ')

100

Temelde bunun input type=textgibi tüm öğeleri seçen bir kod yazdım :

$('.sys input[type=text]').each(function () {}

input[type=text]Veya seçmek için nasıl değiştiririm select?

javascript jquery

— Jack
kaynak

178

Normal bir css seçici kullanarak:

$('.sys input[type=text], .sys select').each(function() {...})

Tekrarı beğenmediyseniz:

$('.sys').find('input[type=text],select').each(function() {...})

Veya daha kısaca, contextargümanı iletin:

$('input[type=text],select', '.sys').each(function() {...})

Not: Dahili jQueryolarak yukarıdakileri find()eşdeğerine dönüştürecek

http://api.jquery.com/jQuery/

Dahili olarak, seçici bağlamı .find () yöntemiyle uygulanır, bu nedenle $ ('span', this), $ (this) .find ('span') ile eşdeğerdir.

Ben şahsen en çok okunan ilk alternatifi buluyorum :)

— Andreas Wong
kaynak

1

'Yi context formkullandığı için find form, find formdaha verimlidir context form(bir çağrı fonksiyonundan kaçınılır). Bu, kullanılan hemen hemen tüm seçici için geçerlidir. Daha sonra, IMO find formdaha verimlidir normal CSS selector, çünkü seçicinin her iki kısmı da kök düğüme bağlıdır, burada find formsadece .sysparça ona bağlıdır, daha sonra input[type=text],selectçok daha küçük bir öğe kümesi üzerinde yürütülür, böylece daha hızlı olabilir (ancak bunun testlerle doğrulanması gerekiyor)

— pomeh

1

@pomeh Nereden geldiğinizi görebiliyorum, ancak bir $aramanın performansı uygulamanız için bu kadar önemliyse , lütfen jQuery'yi tamamen kullanmaktan kaçının :). Bu cevap OP'nin sorusuna cevap vermeye çalıştı, eğer bir performans sorusu olsaydı, bu cevap ilk etapta burada olmayacaktı. Yorumunuz için yine de teşekkürler :), teşekkürler

— Andreas Wong

1

Benim yorumum tek bir $arama performansıyla ilgili değil $, bir uygulamada bulunan tüm aramalar hakkındaydı . IMO, aynı şeyi yapmanın farklı yolları olduğunda, her zaman daha iyi performans gösteren birini seçmeye çalışıyorum. slow performance=== unhappy users. Ayrıca, hem bir OP'nin sorusunu (sizin yaptığınız gibi) birden fazla yanıtla yanıtlayabiliriz hem de her biri için avantajlar / uygunsuzluklar sağlayabiliriz (yorumda yaptığım gibi). IMO Aynı sonucu verirken tüm yanıtların neden farklı olduğunu fark etmek önemlidir. Ayrıca, yavaş çalışan vanilya JavaScript kodu da yazabiliriz JavaScriptperformance

— :!

1

@pomeh Performansla ilgili düşüncem şuydu, performansı gerçekten önemsiyorsanız jQuery'leri $kullanmayın document.getElemenById/ElementsByClassName, div'lerinizi özel olarak sınıflandırın ve $seçicinizin çok fazla kontrol / dizge ayrıştırmasına neden olacak şekilde kullanmak yerine jQuery ünlü değildir performant kütüphanesi için. Ve bir uygulamayı $çok fazla aradığım için yavaşlayan bir uygulamanın gerçekten yavaşladığını görmedim , bu sorunu olan bir web siteniz varsa, lütfen bana gösterin, çok ilgileniyorum :)

— Andreas Wong

2

@pomeh Evet, JS hakkındaki düşüncenize yürekten katılıyorum! = Performans :), günün sonunda, programcıların gerçekten mantıklı kod yazmaları bize iniyor. Kısa tartışma için teşekkürler, iyi günler :)

— Andreas Wong

7

$('.sys').children('input[type=text], select').each(function () { ... });

DÜZENLEME: Aslında yukarıdaki kod .sys > input[type=text]alt seçiciye eşdeğerdir, eğer .sys input[type=text]neslin select ( ) olmasını istiyorsanız @NiftyDude tarafından verilen seçenekleri kullanmanız gerekir.

Daha fazla bilgi:

— Wouter J
kaynak

chilrenyerine yazdınızchildren

— pomeh

5

Yinelemeniz gereken bir form veya tabloda metin olarak birden çok girişiniz varsa, bunu yaptım:

var $list = $("#tableOrForm :input[type='text']");

$list.each(function(){
    // Go on with your code.
});

Yaptığım şey, türün "metin" olarak ayarlanıp ayarlanmadığını görmek için her girişi kontrol etmekti, ardından o öğeyi alıp jQuery listesinde saklayacaktı. Ardından, bu listeyi yineler. Geçerli yineleme için aşağıdaki gibi geçici bir değişken ayarlayabilirsiniz:

var $currentItem = $(this);

Bu, geçerli öğeyi her döngü için geçerli yinelemeye ayarlayacaktır. Sonra temp değişkeni ile istediğinizi yapabilirsiniz.

Umarım bu herkese yardımcı olur!

— Jason Cidras
kaynak

3

$('input[type=text],select', '.sys');

döngü için:

$('input[type=text],select', '.sys').each(function() {
   // code
});

— thecodeparadox
kaynak