How to get all child inputs of a div element (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>

I need to select all inputs in the particular div.

This's not working:

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

Use it without the greater than:

$("#panel :input");

The > means only direct children of the element, if you want all children no matter the depth just use a space.

You need

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

or, depending on what exactly you want (see below)

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

the > will restrict to children, you want all descendants.

EDIT: As Nick pointed out, there's a subtle difference between $("#panel input") and $("#panel :input).

The first one will only retrieve elements of type input, that is <input type="...">, but not <textarea>, <button> and <select> elements. Thanks Nick, didn't know this myself and corrected my post accordingly. Left both options, because I guess the OP wasn't aware of that either and -technically- asked for inputs... :-)

The 'find' method can be used to get all child inputs of a container that has already been cached to save looking it up again (whereas the 'children' method will only get the immediate children). e.g.

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

If you are using a framework like Ruby on Rails or Spring MVC you may need to use divs with square braces or other chars, that are not allowed you can use document.getElementById and this solution still works if you have multiple inputs with the same type.

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');
});

This examples shows how to clear the inputs, for you example you'll need to change it.

here is my approach:

You can use it in other event.

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>

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

should work :-)

the > will only fetch direct children, no children's children
the : is for using pseudo-classes, eg. :hover, etc.

you can read about available css-selectors of pseudo-classes here: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors