Wejście selektora JQuery [type = text] ')

98

Napisałem kod, który w zasadzie wybiera wszystkie input type=textelementy w ten sposób:

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

Jak mogę to zmienić, aby wybrać input[type=text]lub select?

javascript jquery

— Jacek
źródło

177

Używając normalnego selektora CSS:

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

Jeśli nie podoba ci się powtórzenie:

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

Lub, bardziej zwięźle, przekaż contextargument:

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

Uwaga: wewnętrznie jQueryprzekonwertuje powyższe na find()równoważne

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

Wewnętrznie kontekst selektora jest zaimplementowany za pomocą metody .find (), więc $ ('span', this) jest równoważne $ (this) .find ('span').

Osobiście uważam, że pierwsza alternatywa jest najbardziej czytelna :), jednak twoja opinia

— Andreas Wong
źródło

1

Ponieważ context formużywa the find form, find formjest bardziej wydajne niż context form(uniknięto jednej funkcji wywołania). Dotyczy to prawie wszystkich używanych selektorów. Wtedy IMO find formjest bardziej wydajne niż the normal CSS selector, ponieważ obie części selektora są względem węzła głównego, gdzie w find form, tylko .sysczęść jest względem niego, wtedy input[type=text],selectjest wykonywana na znacznie mniejszym zestawie elementów więc może być szybsza (ale trzeba to zweryfikować testami)

— pomeh

1

@pomeh Widzę, skąd przychodzisz, ale jeśli wykonanie $połączenia jest tak ważne dla Twojej aplikacji, proszę całkowicie unikać używania jQuery :). Ta odpowiedź była próbą odpowiedzi na pytanie OP, gdyby to była kwestia wydajności, to tej odpowiedzi nie byłoby tutaj. W każdym razie dziękuję za komentarz :), doceniam

— Andreas Wong

1

mój komentarz nie dotyczył perf a one $call, ale wszystkich $wywołań obecnych w jednej aplikacji. IMO, kiedy masz różne sposoby na zrobienie tego samego, zawsze staram się wybierać ten, który działa lepiej bc. slow performance=== unhappy users. Ponadto możemy zarówno odpowiedzieć na pytanie OP, podając wiele odpowiedzi (tak jak ty), jak i przedstawić zalety / niedogodności z każdego z nich (tak jak to zrobiłem w komentarzu). IMO ważne jest, aby zauważyć, dlaczego wszystkie odpowiedzi są różne, zapewniając ten sam wynik. Możemy również napisać JavaScriptperformance

— prosty

1

@pomeh Chodziło mi o wydajność, jeśli naprawdę zależy ci na wydajności, nie używaj jQuery $, klasyfikuj specjalnie swoje elementy div i używaj document.getElemenById/ElementsByClassNamezamiast przechodzenia przez $wiele sprawdzania / parsowania ciągów twojego selektora, jQuery nie jest sławne za swoją wydajną bibliotekę. I szczerze mówiąc, nie widziałem, aby aplikacja zwalniała z powodu dzwonienia o $jedną za dużo, jeśli masz stronę internetową, która ma ten problem, pokaż mi, jestem bardzo zainteresowany :)

— Andreas Wong

2

@pomeh Tak, w pełni zgadzam się z twoim punktem widzenia JS! = Wydajność :), na koniec dnia nadal sprowadza się to do nas, programistów, aby faktycznie napisać rozsądny kod. Dzięki za krótką dyskusję, życzę miłego dnia :)

— Andreas Wong

7

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

EDYCJA: W rzeczywistości powyższy kod jest równoważny selektorowi dzieci, .sys > input[type=text]jeśli chcesz, aby element .sys input[type=text]potomny select ( ) musiał użyć opcji podanych przez @NiftyDude.

Więcej informacji:

— Wouter J.
źródło

chilrenzamiast tego wpisałeśchildren

— pomeh

5

Jeśli masz wiele danych wejściowych jako tekst w formularzu lub tabeli, przez które musisz iterować, zrobiłem to:

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

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

Sprawdziłem każde wejście, aby sprawdzić, czy typ jest ustawiony na „tekst”, a następnie pobierze ten element i zapisze go na liście jQuery. Następnie przejrzałby tę listę. Możesz ustawić zmienną tymczasową dla bieżącej iteracji w następujący sposób:

var $currentItem = $(this);

Spowoduje to ustawienie bieżącego elementu na bieżącą iterację dla każdej pętli. Następnie możesz zrobić, co chcesz ze zmienną tymczasową.

Mam nadzieję, że to pomoże każdemu!

— Jason Cidras
źródło

3

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

do zapętlania:

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

— thecodeparadox
źródło