Введення селектора Jquery [type = text] ')

98

Я написав код, який в основному вибирає всі input type=textтакі елементи:

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

Як змінити його на вибір input[type=text]або select?

javascript jquery

— Джек
джерело

177

Використання звичайного селектора css:

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

Якщо вам не подобається повторення:

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

Або, більш коротко, передайте contextаргумент:

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

Примітка: Внутрішнє jQueryперетворення перерахованого вище в find()еквівалент

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

Внутрішньо контекст селектора реалізований методом .find (), тому $ ('span', this) еквівалентно $ (this) .find ('span').

Я особисто вважаю, що перша альтернатива є найбільш читабельною :), все-таки ваша думка

— Андреас Вонг
джерело

1

Оскільки the context formвикористовує the find form, the find formє більш ефективним, ніж context form(функція одного виклику уникається). Це справедливо майже для всіх використовуваних селекторів. Тоді IMO the find formє більш ефективним, ніж the normal CSS selector, тому що обидві частини селектора відносяться до кореневого вузла, де в find form, тільки .sysчастина відносно нього, то input[type=text],selectвиконується на набагато меншому наборі елементів, щоб це було швидше (але це потрібно перевірити тестами)

— помех

1

@pomeh Я бачу, звідки ти приїжджаєш, але якщо виконання $дзвінка так важливо для твоїй програми, будь-коли уникай використання jQuery :). Ця відповідь намагалася відповісти на запитання ОП, якщо це було питання продуктивності, ця відповідь тут не буде в першу чергу. Як би не дякував за коментар :), ціную

— Андреас Вонг,

1

мій коментар стосувався не одного $дзвінка, а всіх $дзвінків, присутніх в одному додатку. ІМО, коли у вас різні способи робити одне і те ж, я намагаюся завжди вибирати той, який має кращі результати до н. Е. slow performance=== unhappy users. Крім того , ми можемо як відповісти на питання , ОР з декількома варіантами відповідей (як ви це робили) і надані переваги / незручні кожен з них (як я зробив в коментарі). IMO важливо зауважити, чому всі відповіді різні, при цьому забезпечуючи однаковий результат. Крім того, ми можемо написати ванільний код JavaScript, який працює повільно JavaScriptperformance

— :!

1

@pomeh Моя думка щодо продуктивності полягала в тому, що якщо ви дійсно піклуєтесь про продуктивність, не використовуйте jQuery $, не класифікуйте свої div і використовуйте їх document.getElemenById/ElementsByClassName, а не проходьте через $які багато перевірки / синтаксичного аналізу вашого селектора, jQuery не відомий за свою продуктивну бібліотеку. І я не чесно бачив додаток, що сповільнюється через те, що дзвонив $занадто багато, якщо у вас є веб-сайт, у якого є ця проблема, будь ласка, покажіть мені, мені дуже цікаво :)

— Андреас Вонг,

2

@pomeh Так, я від усієї душі погоджуюсь з вашим твердженням про JS! = Продуктивність :), зрештою, це все ще зводиться до нас, програмістів, щоб насправді писати розумний код. Дякую за коротку дискусію, гарного дня :)

— Андреас Вонг,

7

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

EDIT: Насправді цей код вище еквівалентний дочірньому селектору, .sys > input[type=text]якщо ви хочете нащадка select ( .sys input[type=text]), вам потрібно скористатися параметрами, заданими @NiftyDude.

Більше інформації:

— Вутер Дж
джерело

ви набрали chilrenзамістьchildren

— помех

5

Якщо у вас є кілька входів у вигляді тексту у формі або таблиці, які вам потрібно переглядати, я зробив це:

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

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

Що я зробив, я перевіряв кожен вхід, щоб побачити, чи встановлений тип "текст", то він захопить цей елемент і збереже його у списку jQuery. Потім він буде переглядати цей список. Ви можете встановити тимчасову змінну для поточної ітерації так:

var $currentItem = $(this);

Це встановить для поточного елемента поточну ітерацію вашого для кожного циклу. Тоді ви можете робити все, що завгодно, із змінною temp.

Сподіваюся, це допоможе комусь!

— Джейсон Сідрас
джерело

3

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

для циклу:

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

— thecodeparadox
джерело