I am trying to find the descendants of a particular node using the jquery .find() method. I have noticed that .find() doesnt match elements based on properties of parents above the current node in the tree. The first find returns 0 elements, but the second find returns the element I was searching for. My question is, is this a limitation of the selector pattern allowed for the find method and is find the only jquery function that has this limitation? I would have expected both of these to return the same element. Also, is there another jquery method that would more succinctly acplish the same thing as second one. This is a simplified example of what I'm trying to do and I cannot remove the .find('.input-group') as this is an input into my function.
$(document).find('.input-group').find('.form-group .form-control')
$(document).find('.input-group').find('.form-control').filter('.form-group .form-control')<script src=".11.1/jquery.min.js"></script>
<html xmlns="">
<body>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="CVV Disabled" value="">
</span>
<input id="vtCvv" name="vtCvv" type="password" class="form-control" required="true" data-bv-field="vtCvv">
</div>
</div>
</body>
</html>I am trying to find the descendants of a particular node using the jquery .find() method. I have noticed that .find() doesnt match elements based on properties of parents above the current node in the tree. The first find returns 0 elements, but the second find returns the element I was searching for. My question is, is this a limitation of the selector pattern allowed for the find method and is find the only jquery function that has this limitation? I would have expected both of these to return the same element. Also, is there another jquery method that would more succinctly acplish the same thing as second one. This is a simplified example of what I'm trying to do and I cannot remove the .find('.input-group') as this is an input into my function.
$(document).find('.input-group').find('.form-group .form-control')
$(document).find('.input-group').find('.form-control').filter('.form-group .form-control')<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html xmlns="http://www.w3/1999/xhtml">
<body>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="CVV Disabled" value="">
</span>
<input id="vtCvv" name="vtCvv" type="password" class="form-control" required="true" data-bv-field="vtCvv">
</div>
</div>
</body>
</html>-
Why dont you just use
$('.form-group .input-group .form-control')– Karl-André Gagnon Commented Jan 8, 2015 at 21:54 -
I realize i could do that in this simple example. Thats why I said that I cannot remove the
.find('.input-group'). My function is accepting a jquery object and I dont have control over the input. I am just trying to find all descendants of the input that would match the '.form-group .form-control' selector if it were run from the document root. – park896 Commented Jan 9, 2015 at 4:14
2 Answers
Reset to default 4.find() looks for a descendant of an element. You're trying to find a parent and then a descendant.
You could find .input-group, then traverse backwards through the DOM to the "closest" .form-group using .closest() and then you could navigate down to .form-control like so:
$(document).find('.input-group').closest('.form-group').find(".form-control")
or you could use .parent() to backtrack to .form-group like so:
$(document).find('.input-group').parent().find(".form-control")
I prefer .closest() because if another element were to be added between .input-group and form-group the parent would be different, but .closest would still work.
$('.form-group .input-group').find('.form-control');