Jquery-Selektoreingabe [Typ = Text] ')

98

Ich habe einen Code geschrieben, der im Grunde alle input type=textElemente wie folgt auswählt :

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

Wie ändere ich es, um input[type=text]oder auszuwählen select?

javascript jquery Jack
quelle

Antworten:

177

Verwenden eines normalen CSS-Selektors:

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

Wenn Ihnen die Wiederholung nicht gefällt:

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

Oder genauer gesagt, geben Sie das contextArgument ein:

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

Hinweis: Intern jQuerywird das oben find()Gesagte in ein Äquivalent konvertiert

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

Intern wird der Selektorkontext mit der Methode .find () implementiert, sodass $ ('span', this) $ (this) .find ('span') entspricht.

Ich persönlich finde die erste Alternative am besten lesbar :), aber Ihre Meinung

Andreas Wong
quelle
1
Da das context formverwendet find form, find formist das effizienter als das context form(One-Call-Funktion vermieden). Dies gilt für fast alle verwendeten Selektoren. Dann ist IMO the find formeffizienter als das normal CSS selector, da beide Teile des Selektors relativ zum Wurzelknoten sind, wobei in der find formnur der .sysTeil relativ dazu ist und dann input[type=text],selectauf einem viel kleineren Satz von Elementen ausgeführt wird, so dass es schneller sein kann (Aber dies muss durch Tests überprüft werden)
Pomeh
1
@pomeh Ich kann sehen, woher Sie kommen, aber wenn die Leistung eines $Anrufs für Ihre App so wichtig ist, vermeiden Sie bitte die Verwendung von jQuery insgesamt :). Diese Antwort versuchte, die Frage von OP zu beantworten. Wenn es sich um eine Frage der Leistung handelte, wird diese Antwort überhaupt nicht hier sein. Trotzdem danke für den Kommentar :), schätze es
Andreas Wong
1
In meinem Kommentar ging es nicht um die Leistung eines $Anrufs, sondern um alle $Anrufe, die in einer Anwendung vorhanden sind. IMO, wenn Sie verschiedene Möglichkeiten haben, dasselbe zu tun, versuche ich immer die zu wählen, die eine bessere Leistung erzielt. slow performance=== unhappy users. Außerdem können wir beide die Frage eines OP mit mehreren Antworten beantworten (wie Sie es getan haben) und jeweils Vorteile / Unannehmlichkeiten für jede von ihnen bieten (wie ich es im Kommentar getan habe). IMO ist es wichtig zu beachten, warum alle Antworten unterschiedlich sind und gleichzeitig das gleiche Ergebnis liefern. Wir können auch Vanille-JavaScript-Code schreiben, der langsam JavaScriptperformance
funktioniert
1
@pomeh Mein Punkt in Bezug auf die Leistung war, wenn Sie sich wirklich für die Leistung interessieren, verwenden Sie nicht jQuery's $, klassifizieren Sie Ihre Divs spezifisch und verwenden Sie document.getElemenById/ElementsByClassName, anstatt $jQuery zu überprüfen, was viel Überprüfung / String-Analyse Ihres Selektors durchführt für seine performante Bibliothek. Und ich habe ehrlich gesagt nicht gesehen, wie eine App langsamer wurde, weil ich $eine zu viele anrief . Wenn Sie eine Website haben, auf der dieses Problem
Andreas Wong
2
@pomeh Ja, ich stimme Ihrem Standpunkt von JS! = Performance von ganzem Herzen zu. Letztendlich läuft es immer noch auf uns, die Programmierer, tatsächlich vernünftigen Code zu schreiben. Vielen Dank für die kurze Diskussion, einen schönen Tag :)
Andreas Wong
7 
$('.sys').children('input[type=text], select').each(function () { ... });

BEARBEITEN: Tatsächlich entspricht dieser Code oben der untergeordneten .sys > input[type=text]Auswahl, wenn Sie den Nachkommen select ( .sys input[type=text]) möchten , müssen Sie die von @NiftyDude angegebenen Optionen verwenden.

Mehr Informationen:

Wouter J.
quelle
Sie tippten chilrenstattchildren
pomeh
5

Wenn Sie mehrere Eingaben als Text in einem Formular oder einer Tabelle haben, die Sie durchlaufen müssen, habe ich Folgendes getan:

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

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

Ich habe bei jeder Eingabe überprüft, ob der Typ auf "Text" gesetzt ist. Dann wird dieses Element erfasst und in der jQuery-Liste gespeichert. Dann würde es diese Liste durchlaufen. Sie können eine temporäre Variable für die aktuelle Iteration wie folgt festlegen:

var $currentItem = $(this);

Dadurch wird das aktuelle Element für jede Schleife auf die aktuelle Iteration von eingestellt. Dann können Sie mit der temporären Variablen tun, was Sie wollen.

Hoffe das hilft jedem!

Jason Cidras
quelle
3 
$('input[type=text],select', '.sys');

zum Schleifen:

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