JQuery: How to find the input named "apples" inside $(this)?

Question

Hello,

I'm learning JQuery and have found the factory function $() with its selectors quite useful. However, I cannot figure out how to select within a particular element I have named as a variable. For example:

var thisDiv = $("#myDiv");

// thisDiv looks like this:
<div id="myDiv">
<input id="apples" />
<input id="bananas" />
</div>

How would I select the input with id="apples" given only the variable thisDiv in JQuery? Thanks!

Answer 1

You could try this

thisDiv.find('#apples');

Answer 2

$("#thisDiv #apples")

But you can also do:

thisDiv.find("#apples"); // use find method

and also:

$("#apples", thisDiv); // provide context

Answer 3

You should be able to select it by searching within your div like:

 $("#myDiv").find("#apples")

Answer 4

$('#apples', thisDiv);

Answer 5

Perhaps yours was only an example and not representative of the proper code, but it's worth mentioning that an ID is unique per document, therefore you don't particularly need the context.

$('#apples');
$('#apples', thisDiv);  // same result, more lookups

If it was just an example, and you wanted to know how to find any element, using any selector, then yep, the other answers here are all correct.

thisDiv.find('li.myClass'); // or,
$('li.myClass', thisDiv);