Como obter todas as entradas filho de um elemento div (jQuery)

158

HTML:

<div id="panel">
  <table>
    <tr>
       <td><input id="Search_NazovProjektu" type="text" value="" /></td>
    </tr>
    <tr>
       <td><input id="Search_Popis" type="text" value="" /></td>
    </tr>
  </table>
</div>

Eu preciso selecionar todas as entradas na div particular.

Isso não está funcionando:

var i = $("#panel > :input");
user137348
fonte

Respostas:

301

Use-o sem o maior que:

$("#panel :input");

O >meio significa apenas filhos diretos do elemento, se você quiser que todos os filhos, independentemente da profundidade, use apenas um espaço.

Nick Craver
fonte
3
Interessante ... Agora estou confuso ... O que :é para pseudo-classes, não é? Mas queremos selecionar um tipo de elemento. Por que o :?
Mnemosyn
11
@mnemosyn - Este é outro tipo de seletor como o `: checkbox ', veja aqui para detalhes: api.jquery.com/input-selector E aqui está uma lista mais completa deles: api.jquery.com/category/selectors/form -selectors
Nick Craver
74

Você precisa

var i = $("#panel input"); 

ou , dependendo do que exatamente você deseja (veja abaixo)

var i = $("#panel :input"); 

o >restringirá a crianças, você quer todos os descendentes.

EDIT: Como Nick apontou, há uma diferença sutil entre $("#panel input")e $("#panel :input).

O primeiro recuperará apenas elementos do tipo input, isto é <input type="...">, mas não <textarea>, <button>e <select>elementos. Obrigado Nick, não sabia disso e corrigi minha postagem de acordo. Deixou as duas opções, porque acho que o OP também não estava ciente disso e - tecnicamente - pediu entradas ... :-)

mnemosyn
fonte
Então,: input selecionará todos os campos input / select / textarea? Tudo de uma vez?
Yuri
Essencialmente sim. O seletor retorna uma matriz de jogos, então eu acho que você poderia dizer que ele faz isso 'ao mesmo tempo', embora eu não estou perfeitamente certo o que você quer dizer com isso ...
mnemosyn
1
Quero dizer, "todos juntos" com apenas esse seletor. ": seletor de entrada Descrição: seleciona todos os elementos de entrada, área de texto, seleção e botão." Não sabia sobre isso, vou usá-lo a partir de agora :)
Yuri
50

O método 'find' pode ser usado para obter todas as entradas filho de um contêiner que já foi armazenado em cache para economizar a procura novamente (enquanto o método 'filhos' só obterá os filhos imediatos). por exemplo

var panel= $("#panel");
var inputs = panel.find("input");
Rob Willis
fonte
5
Isso foi perfeito para mim - estou repetindo elementos usando .each (), o que significa que, dentro do loop, estou acessando o elemento atual usando $ (this). Como resultado, não consigo executar muito do que é sugerido nas respostas. - Em vez disso, sou capaz de fazer $ (this) .find ("input"); Obrigado.
Djbp 23/05
29

Se você estiver usando uma estrutura como Ruby on Rails ou Spring MVC, pode ser necessário usar divs com colchetes ou outros caracteres, que não são permitidos, você pode usar document.getElementByIde esta solução ainda funcionará se você tiver várias entradas do mesmo tipo.

var div = document.getElementById(divID);
$(div).find('input:text, input:password, input:file, select, textarea')
        .each(function() {
            $(this).val('');
        });
$(div).find('input:radio, input:checkbox').each(function() {
    $(this).removeAttr('checked');
    $(this).removeAttr('selected');
});

Este exemplo mostra como limpar as entradas; por exemplo, você precisará alterá-lo.

Paulo Fidalgo
fonte
9
var i = $("#panel input");

Deveria trabalhar :-)

> buscará apenas filhos diretos, filhos não filhos
:: é para usar pseudo-classes, por exemplo. : pairar, etc.

você pode ler sobre os seletores de CSS disponíveis das pseudo-classes aqui: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

Phil Rykoff
fonte
6
@henchman - também :inputé um seletor, api.jquery.com/category/selectors/form-selectors Se ele tivesse um <textarea>botão ou inputnão o encontraria, encontraria :input, então existe uma diferença.
Nick Craver
+1, então deixar de fora> fará o truque. Agora eu também achei na página i recomendado ....
Phil Rykoff
9

aqui está a minha abordagem:

Você pode usá-lo em outro evento.

var id;
$("#panel :input").each(function(e){	
  id = this.id;
  // show id 
  console.log("#"+id);
  // show input value 
  console.log(this.value);
  // disable input if you want
  //$("#"+id).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel">
  <table>
    <tr>
       <td><input id="Search_NazovProjektu" type="text" value="Naz Val" /></td>
    </tr>
    <tr>
       <td><input id="Search_Popis" type="text" value="Po Val" /></td>
    </tr>
  </table>
</div>

Uttam Kumar Roy
fonte