Come ottenere tutti gli input figlio di un elemento div (jQuery)

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>

Devo selezionare tutti gli input nel div specifico.

Questo non funziona:

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

Usalo senza il maggiore di:

$("#panel :input");

I >mezzi unici diretti figli dell'elemento, se si desidera che tutti i bambini, non importa la profondità basta usare uno spazio.

Hai bisogno

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

o , a seconda di cosa esattamente vuoi (vedi sotto)

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

la >limiterà ai bambini, vuoi tutti i discendenti.

EDIT: Come Nick ha sottolineato, c'è una sottile differenza tra $("#panel input")e $("#panel :input).

Il primo recupererà solo elementi di input di tipo, ovvero <input type="...">, ma non <textarea>, <button>ed <select>elementi. Grazie Nick, non lo sapevo da solo e ho corretto di conseguenza il mio post. Lasciate entrambe le opzioni, perché immagino che l'OP non ne fosse a conoscenza e che, tecnicamente, abbia chiesto input ... :-)

Il metodo "find" può essere utilizzato per ottenere tutti gli input figlio di un contenitore che è già stato memorizzato nella cache per salvare la ricerca di nuovo (mentre il metodo "children" otterrà solo i figli immediati). per esempio

var panel= $("#panel");
var inputs = panel.find("input");

Se si utilizza un framework come Ruby on Rails o Spring MVC, potrebbe essere necessario utilizzare div con parentesi graffe quadrate o altri caratteri, che non sono autorizzati a utilizzare document.getElementByIde questa soluzione funziona ancora se si dispone di più input con lo stesso 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');
});

Questo esempio mostra come cancellare gli input, per il tuo esempio dovrai cambiarlo.

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

dovrebbe funzionare :-)

il> prenderà solo i bambini diretti, nessun figlio dei bambini
il: è per usare le pseudo-classi, ad es. : hover, ecc.

puoi leggere i selettori CSS disponibili di pseudo-classi qui: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

ecco il mio approccio:

Puoi usarlo in altri eventi.

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>