Entrada do seletor Jquery [type = text] ')

98

Escrevi um código que basicamente seleciona todos os input type=textelementos como este:

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

Como faço para alterar para selecionar input[type=text]ou select?

javascript jquery

— Jack
fonte

177

Usando um seletor css normal:

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

Se você não gosta da repetição:

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

Ou, de forma mais concisa, passe o contextargumento:

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

Nota: Internamente jQueryirá converter o acima em find()equivalente

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

Internamente, o contexto do seletor é implementado com o método .find (), então $ ('span', this) é equivalente a $ (this) .find ('span').

Eu pessoalmente acho que a primeira alternativa é a mais legível :), mas sua opinião

— Andreas Wong
fonte

1

Como o context formestá usando o find form, o find formé mais eficiente do que o context form(uma função de chamada evitada). Isso é válido para quase todos os seletores usados. Então, IMO o find formé mais eficiente do que o normal CSS selector, porque ambas as partes do seletor são relativas ao nó raiz, onde no find form, apenas a .sysparte é relativa a ele, então input[type=text],selecté executado em um conjunto muito menor de elementos, então pode ser mais rápido (mas precisa ser verificado por testes)

— pomeh

1

@pomeh eu posso ver de onde você está vindo, mas se o desempenho de uma $chamada é tão importante para o seu aplicativo, evite usar jQuery completamente :). Essa resposta tentou responder à pergunta de OP, se fosse uma questão de desempenho, essa resposta não estaria aqui em primeiro lugar. De qualquer forma, obrigado pelo comentário :), obrigado

— Andreas Wong

1

meu comentário não foi sobre o desempenho de uma $chamada, mas sobre todas as $chamadas presentes em um aplicativo. IMO, quando você tem maneiras diferentes de fazer a mesma coisa, procuro sempre escolher aquela que funciona melhor bc. slow performance=== unhappy users. Além disso, podemos tanto responder à pergunta de um OP com respostas múltiplas (como fez) e vantagens proporcionadas / inconveniente de cada um deles (como eu fiz no comentário). IMO, é importante notar porque todas as respostas são diferentes, fornecendo o mesmo resultado. Além disso, podemos escrever código JavaScript vanilla com desempenho lento JavaScriptperformance

— :!

1

@pomeh Meu ponto sobre o desempenho foi, se você realmente se preocupa com o desempenho, não use jQuery $, classifique seus divs especificamente e use document.getElemenById/ElementsByClassName, em vez de passar pelo $que faz muitas verificações / análise de string de seu seletor, jQuery não é famoso para sua biblioteca de desempenho. E eu, honestamente, não vi um app ficar lento por ter ligado $demais, se você tiver um site com esse problema, por favor, me mostre, estou muito interessado :)

— Andreas Wong

2

@pomeh Sim, concordo de todo o coração com seu ponto de JS! = Desempenho :), no final do dia, ainda se resume a nós, os programadores, para realmente escrever um código sensato. Obrigado pela breve discussão, tenha um bom dia :)

— Andreas Wong

7

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

EDIT: Na verdade, este código acima é equivalente ao seletor de filhos, .sys > input[type=text]se você quiser o select ( .sys input[type=text]) descendente, você precisa usar as opções fornecidas por @NiftyDude.

Mais Informações:

— Wouter J
fonte

você digitou em chilrenvez dechildren

— pomeh

5

Se você tiver várias entradas como texto em um formulário ou tabela que precise iterar, eu fiz o seguinte:

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

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

O que eu fiz foi verificar cada entrada para ver se o tipo está definido como "texto", então ele pegará esse elemento e o armazenará na lista jQuery. Em seguida, iteraria essa lista. Você pode definir uma variável temporária para a iteração atual assim:

var $currentItem = $(this);

Isso definirá o item atual para a iteração atual de cada loop. Então você pode fazer o que quiser com a variável temp.

Espero que isso ajude alguém!

— Jason Cidras
fonte

3

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

para loop:

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

— oecodeparadoxo
fonte