Question

I have an HTML page with a variety of divs on it. For instance, something like this:

<div id="myDiv1">
  <input id="myInput1" type="text" />
  <input id="myInput2" type="text" />
  <input id="myButton" type="button" value="Button" />
</div>

<div id="myDiv2">
  <!-- My Content -->
</div>

How do I use JQuery to:

1. Get ALL input fields of type text within myDiv1
2. Get a single input field inside of a div

Traditionally, I would use the following:

var textFields = $(":text");
var myInput = $("#myInput1");

However, I would really like to understand how to search within a single DIV element.

Thank you so much!

Answer 1

Use the find() method.

$('#myDiv1').find('input[type="text"]');
$('#myDiv1').find('input#myInput1');

If you know that the inputs are direct children of #myDiv1 (this is faster)

$('#myDiv1').children('input[type="text"]');

Or you can also use an optional second parameter to $, which is the context.

$('input[type="text"]', '#myDIv1');

You should also store #myDiv1 since you are using it more than one time:

var $myDIv  = $('#myDiv1'),
    $inputs = $myDiv.children('input[type="text"]'),
    $input  = $myDiv.children('input#myInput1');