If hasClass not working on document.ready

Question

I'm trying to change background color, when slide element has class (slick-current) but it's not working at all on document.ready, even can't display something in console.log(). Console not displaying any errors. (.content is a parent element of .slider-container).

Here is html code:

<div class="slider-container">
    <div class="single-item">
        <div class="slick-slide " id="slide-1" data-slick-index="0" ><h3>1</h3></div>
        <div class="slick-slide slide-2" data-slick-index="1" ><h3>2</h3></div>
        <div class="slick-slide slide-3" data-slick-index="2" ><h3>3</h3></div>

    </div>
</div>

Here is jquery:

$(document).ready(function() {

    if($("#slide-1").hasClass(".slick-current")){
        $('.content').css("background-color", "yellow")
        console.log('ggh');
    }
});

Answer 1

When using hasClass you should leave out the .

 $(document).ready(function() { if ($("#slide-1").hasClass("slick-current")) { $('.content').css("background-color", "yellow") console.log('has class slick-current'); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slider-container"> <div class="single-item"> <div class="slick-slide slick-current" id="slide-1" data-slick-index="0"> <h3>1</h3> </div> <div class="slick-slide slide-2" data-slick-index="1"> <h3>2</h3> </div> <div class="slick-slide slide-3" data-slick-index="2"> <h3>3</h3> </div> </div> </div>

Answer 2

Remove "." in the hasClass brackets and it should works :) Here's documentation to hasClass https://api.jquery.com/hasclass/ Check here how to use it properly.

Answer 3

Remove . in the hasClass .

 $(document).ready(function() { if ($("#slide-1").hasClass("slick-current")) { $('.content').css("background-color", "yellow") console.log('ggh'); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="slider-container"> <div class="single-item"> <div class="slick-current" id="slide-1" data-slick-index="0"> <h3>1</h3> </div> <div class="slick-slide slide-2" data-slick-index="1"> <h3>2</h3> </div> <div class="slick-slide slide-3" data-slick-index="2"> <h3>3</h3> </div> </div> </div>