jQuery - getting first child div

Question

I want to be able to remove disabled-item from the first child of s-yes - but it is not removing?

If I console.log the value of show then I see what appears to be the wrong item altogether:

[div#s-yes, prevObject: n.fn....

HTML:

<div id="s-yes" style="display: none;">
    <div class="s-item s-question disabled-item">
        <label>label name</label>

jQuery:

 show = $('#s-yes');
 show.show('fast');
 show.first().removeClass('disabled-item');

What am I doing wrong?

Answer 1

Try to use .children() over the parent element,

 show = $('#s-yes');
 show.show('fast');
 show.children().first().removeClass('disabled-item');

Your code is not working because, .first() would get the first element in the element collection. But while using id selector the collection would always contains 0/1 element in it.

So while using .children() over the parent element. It would return the collection of elements which are the direct child of its parent. You can use .find() instead of .children() but it would return all the descendants.

Answer 2

You have incorrect selector to target the required element. your selector is selecting the object $('#s-yes') :

$('.disabled-item:first',show).removeClass('disabled-item');