JQuery kids selector

Question

I have the following markup:

<div class="form-fields"> <div class="row"> <span class="info">Info</span> </div> </div> 

Using the children selector, how can I select span.info? I tried to do:

$('.form-fields').children('.row .info')

But that did not work for me.

EDIT: Thanks for all the answers. If I assign the DIV container as follows:

var parentDiv = $('.form-fields')

Then using var 'parentDiv', what is the best way to choose span.info?

Answer 1

Use find to get indirect children:

 $('.form-fields').find('.row .info') 

Answer 2

Why do you need to use .children ?

 $('.form-fields span.info') 

Answer 3

.children() will only capture immediate child nodes. You need to call .find() .

 $('.form-fields').find('.row .info') 

or even

 $('.form-fields').find('.row').find('.info'); 

just using the selector

 $('.form-fields .info') 

Link:. children (),. find ()

Answer 4

 $('.form-fields').children('.row').children('.info') 

you can check it like:

 $(document).ready(function() { alert( $('.form-fields').children('.row').children('.info').length); });