Help needed on jQuery find function

Question

Hi guys, This might sound a little dumb, but can you please point out why in the following script 'firstValue' is undefined and 'secondValue' is as needed, i.e. 4.

<div >
<input class="feedback-selected"  type="hidden" value="4" />
</div>    
<script type="text/javascript">

    var firstValue = $(this).find('.feedback-selected').val();
    var secondValue = $('.feedback-selected').val();
    alert(firstValue);
    alert(secondValue);

</script>

I am sure I am not using the find function as it should be.

Answer 1

this doesn't have a value in your example, so the find() function will not find anything.

(this is only valid in instance functions or event handlers)

Answer 2

What activa said... and you could probably use $(document) instead of $(this) if you need to use .find()

Answer 3

activa's answer is correct. $("<selector>") is the equivalent of what you were trying to do with the first search. find("<selector>") is meant for searching within a wrapped set, not as a starting point.

However, I would add that a better way of retrieving the value in this case is:

var value = $("input.feedback-selected").val();

This is because including the type of the element will allow jQuery to search the DOM in a quicker way.

Answer 4

find() searches for descendant elements of the jQuery object you call it on. You call find() on the results of $(this), which is nothing. If you want to call find() on the document, you'll have to use $(document).

Answer 5

this in your example is not a DOM element that contains any subelements of class "feedback-selected", so the find function can't find them. It might not even be a DOM element.

I would note that $(this) can be valid anywhere this points to a DOM element. So if pretty much anytime you're triggering a function that is called from a DOM element, you're fine. It's all about the scope in this case. This would be valid too:

function aha() {
 alert($(this).find('.feedback-selected').val());
}

aha.apply(document);

Answer 6

Explanation of what 'this' means in jQuery