CODEWITHSUNDEEP
javascriptjquery
Jesper Heller Hansen
Jesper Heller Hansen

Reputation: 3

JS: Adding class to container, in an if-statement

I'm trying to make a small script with an if-statement: I want the condition to be, that if the class "page-title" contains "Welcome" it will add the class "excluded" to the element with the other class called "example". This is the js-code I've tried so far without luck:

<script>
        $(document).ready(function(){
            if(".page-title:contains('Welcome')"){
                document.getElementsByClassName("example").addClass("excluded");
            }
            else{
                
            }
        });
    </script>

Upvotes: 0

Views: 256

Answers (4)

Paras Sharma
Paras Sharma

Reputation: 99

here is a simple fix with js

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<h1 class="page-title">Welcome</h1>
<div class="example"> Example sample div</div>

<script type="text/javascript">
   $(document).ready(function(){

    if($('.page-title').text() == 'Welcome') {
        $('.example').addClass('excluded'); 

    }else{
      // code here 
    }
            
});

</script>

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

There was 2 problems:

1: document.getElementsByClassName("example").addClass("excluded"); is a mix of javascript and jQuery.

  • javascript way: document.getElementsByClassName("example").classList.add("excluded");
  • jQuery way: $(".example").addClass("excluded");

2: if(".page-title:contains('Welcome')"){ is a valid if statement. use if ($(".page-title:contains('Welcome')")) {

$(document).ready(function() {
  if ($(".page-title:contains('Welcome')")) {
    $(".example").addClass("excluded");
  } else {
  }
});


$(document).ready(function() {
  if ($(".page-title:contains('Welcome')")) {
    $(".example").addClass("excluded");
  } else {

  }
});
.example.excluded {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-title">Welcome to the world</div>

<div class="example">Is this excluded</div>

Upvotes: 0

Ballard
Ballard

Reputation: 899

$(document).ready(function(){
    if($('.page-title').text().indexOf('Welcome')){
        $(".example").addClass("excluded");
    }
});

You will need to decide which container/element you wish to add the 'excluded' class to, if you're finding that by using a class, you would write: $(".class-name-of-element-here").addClass("excluded"); or with an ID: $("#id_of_element_here").addClass("excluded");

Notice when searching for a container or element by ID, we use # and a class with .

Any example of this is: $('.page-title') you're looking for any element on the page with a class of page-title

When you're using addClass, you do not need to specify the . as a prefix, because we are specifically looking for a class.

Upvotes: 0

Michał Tkaczyk
Michał Tkaczyk

Reputation: 736

You can implement that by selecting container with your class with jQuery, using text() method on it and trying to find "Welcome" in it. Try below code:

if($('.page-title').text().includes('Welcome')) {
    // your code here
}

Upvotes: 0

Related Questions