CODEWITHSUNDEEP
jquery
Sergi
Sergi

Reputation: 1240

addClass to the first child

It should be very straightforward but for some reason it's not working.

$("div.dot-navigation-inner-wrap").find("div:first").addClass("active");
.active { border: 1px solid #CCC; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dot-navigation-inner-wrap">
  <div class="dot-navigation">1</div>
  <div class="dot-navigation">2</div>
  <div class="dot-navigation">3</div>
</div>

Upvotes: 0

Views: 47

Answers (3)

Sergi
Sergi

Reputation: 1240

I was adding the class before the dots existed, as I was appending them a few lines down.

Upvotes: 0

Neil
Neil

Reputation: 5780

I'm not having troubles.

My immediate thoughts are that you're executing the javascript code before the page loads. This means while your javascript runs, it cannot find the tags you search for.

Consider enclosing in load block:

$(function() {
    $("div.dot-navigation-inner-wrap").find("div:first").addClass("active");
});

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30729

It is working fine. Make sure you have included JQuery plugin in your HTML file. 

$("div.dot-navigation-inner-wrap").find("div:first").addClass("active");
.active{
  color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dot-navigation-inner-wrap">

    <div class="dot-navigation">A</div>
    <div class="dot-navigation">B</div>
    <div class="dot-navigation">C</div>

</div>

Upvotes: 2

Related Questions