CODEWITHSUNDEEP
jquery
b85411
b85411

Reputation: 10040

jQuery - getting first child div

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?

Upvotes: 2

Views: 12630

Answers (6)

albert Jegani
albert Jegani

Reputation: 462

This is also Work

$("#s-yes").show('fast').children().first().removeClass('disabled-item');
$("#s-yes").show('fast').children().eq(0).removeClass('disabled-item');
$("#s-yes").show('fast').find(":first").removeClass('disabled-item');
$("#s-yes").show('fast').find(":first-child").removeClass('disabled-item');
$("#s-yes").show('fast').find(":nth-child(1)").removeClass('disabled-item');
$("#s-yes").show('fast').children(":first").removeClass('disabled-item');
$("#s-yes").show('fast').children(":first-child").removeClass('disabled-item');
$("#s-yes").show('fast').children(":nth-child(1)").removeClass('disabled-item');

Upvotes: 0

aditya
aditya

Reputation: 26

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5

$( "li" ).first().css( "background-color", "red" );

Here first returns the first list item

Instead of using

Show.first().removeClass('disabled-item')

it will return the same the error you got

So

use this $( '#s-yes' ).children( ".disabled-item" ).removeClass('disabled-item');

.children travels only one level down as per your requirement

if the disabled-item class is in other child elements also then you can use the first() after children

hope this helps

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

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

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

Upvotes: 1

Shaunak D
Shaunak D

Reputation: 20646

Use the :first selector on children,

show = $('#s-yes');
show.show('fast');
$(':first', show).removeClass('disabled-item');
//^-children,^-parent

Your code runs first() on the parent itself.

Upvotes: 0

Brijesh Bhatt
Brijesh Bhatt

Reputation: 3830

Try this: 

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

.first() returns the the first element with id s-yes.

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

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.

Upvotes: 9

Related Questions