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

Question 1

Я написал код, который в основном выбирает все input type=textэлементы следующим образом:

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

Как мне изменить его на выбор input[type=text]или select?

Question 2

Используя обычный селектор 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').

Я лично считаю, что первая альтернатива наиболее читабельна :), хотя

Question 3

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

РЕДАКТИРОВАТЬ: На самом деле этот код выше эквивалентен селектору дочерних элементов, .sys > input[type=text]если вы хотите, чтобы потомок select ( .sys input[type=text]), вам нужно использовать параметры, заданные @NiftyDude.

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

Question 4

Если у вас есть несколько входов в виде текста в форме или таблице, которые вам нужно перебрать, я сделал следующее:

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

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

Что я сделал, так это проверил каждый ввод, чтобы увидеть, установлен ли тип на «текст», затем он захватит этот элемент и сохранит его в списке jQuery. Затем он будет перебирать этот список. Вы можете установить временную переменную для текущей итерации следующим образом:

var $currentItem = $(this);

Это установит текущий элемент на текущую итерацию вашего для каждого цикла. Затем вы можете делать все, что хотите, с переменной temp.

Надеюсь, это кому-нибудь поможет!

Question 5

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

для зацикливания:

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

Answer 1

Я написал код, который в основном выбирает все input type=textэлементы следующим образом:

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

Как мне изменить его на выбор input[type=text]или select?

Answer 2

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

Поскольку context formиспользуется функция find form, find formона более эффективна, чем context formфункция (можно избежать одного вызова). Это справедливо почти для всех используемых селекторов. Затем IMO find formболее эффективен, чем normal CSS selector, потому что обе части селектора относятся к корневому узлу, где в find form, только .sysчасть относится к нему, затем input[type=text],selectвыполняется на гораздо меньшем наборе элементов, поэтому он может быть быстрее (но нужно это проверять тестами)

помех

1

@pomeh Я вижу, откуда вы пришли, но если производительность $вызова так важна для вашего приложения, пожалуйста, вообще избегайте использования jQuery :). Этот ответ пытался ответить на вопрос OP, если бы это был вопрос производительности, этого ответа здесь вообще не было бы. В любом случае спасибо за комментарий :), оцените его

Андреас Вонг

1

мой комментарий касался не выполнения одного $звонка, а всех $звонков, присутствующих в одном приложении. ИМО, когда у вас есть разные способы сделать одно и то же, я стараюсь всегда выбирать тот, который работает лучше bc. slow performance=== unhappy users. Кроме того , мы можем как ответить на вопрос , ОР с несколькими вариантами ответов (как вы это делали) и предоставленные преимущества / неудобные каждый из них (как я сделал в комментарии). ИМО важно заметить, почему все ответы разные, но дают одинаковый результат. Кроме того, мы можем написать ванильный код JavaScript, который работает медленно JavaScript:! ==performance

pomeh

1

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

Андреас Вонг

2

@pomeh Да, я полностью согласен с вашей точкой зрения на JS! = Производительность :), в конце концов, это все еще сводится к нам, программистам, писать разумный код. Спасибо за короткое обсуждение, хорошего дня :)

Андреас Вонг

Answer 3

1

Поскольку context formиспользуется функция find form, find formона более эффективна, чем context formфункция (можно избежать одного вызова). Это справедливо почти для всех используемых селекторов. Затем IMO find formболее эффективен, чем normal CSS selector, потому что обе части селектора относятся к корневому узлу, где в find form, только .sysчасть относится к нему, затем input[type=text],selectвыполняется на гораздо меньшем наборе элементов, поэтому он может быть быстрее (но нужно это проверять тестами)

помех

Answer 4

1

@pomeh Я вижу, откуда вы пришли, но если производительность $вызова так важна для вашего приложения, пожалуйста, вообще избегайте использования jQuery :). Этот ответ пытался ответить на вопрос OP, если бы это был вопрос производительности, этого ответа здесь вообще не было бы. В любом случае спасибо за комментарий :), оцените его

Андреас Вонг

Answer 5

1

мой комментарий касался не выполнения одного $звонка, а всех $звонков, присутствующих в одном приложении. ИМО, когда у вас есть разные способы сделать одно и то же, я стараюсь всегда выбирать тот, который работает лучше bc. slow performance=== unhappy users. Кроме того , мы можем как ответить на вопрос , ОР с несколькими вариантами ответов (как вы это делали) и предоставленные преимущества / неудобные каждый из них (как я сделал в комментарии). ИМО важно заметить, почему все ответы разные, но дают одинаковый результат. Кроме того, мы можем написать ванильный код JavaScript, который работает медленно JavaScript:! ==performance

pomeh

Answer 6

1

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

Андреас Вонг

Answer 7

2

@pomeh Да, я полностью согласен с вашей точкой зрения на JS! = Производительность :), в конце концов, это все еще сводится к нам, программистам, писать разумный код. Спасибо за короткое обсуждение, хорошего дня :)

Андреас Вонг

Answer 8

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

РЕДАКТИРОВАТЬ: На самом деле этот код выше эквивалентен селектору дочерних элементов, .sys > input[type=text]если вы хотите, чтобы потомок select ( .sys input[type=text]), вам нужно использовать параметры, заданные @NiftyDude.

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

Answer 9

вы набрали chilrenвместоchildren

помех

Answer 10

Если у вас есть несколько входов в виде текста в форме или таблице, которые вам нужно перебрать, я сделал следующее:

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

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

Что я сделал, так это проверил каждый ввод, чтобы увидеть, установлен ли тип на «текст», затем он захватит этот элемент и сохранит его в списке jQuery. Затем он будет перебирать этот список. Вы можете установить временную переменную для текущей итерации следующим образом:

var $currentItem = $(this);

Это установит текущий элемент на текущую итерацию вашего для каждого цикла. Затем вы можете делать все, что хотите, с переменной temp.

Надеюсь, это кому-нибудь поможет!

Answer 11

3

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

для зацикливания:

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

кодпарадокс
источник

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

Ответы: