Question 101592 in Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – JQuery – Change className with logic conditions

I am looking for modifying the class name of a div according to the name of another div.
I cannot make it work with JQuery.

Here is the html structure :

<div class="div-overlay">
    <a class="image" href="https://www.example.net/page-events/" target="_blank"></a>

    <div class="div-container">
        <ul class="post-categories">
            <li>
                <a href="https://www.example.net/category/events/" class="category-item">Events</a>
            </li>                                       
        </ul>
</div>
    
<div class="div-overlay">
    <a class="image" href="https://www.example.net/page-conferences/" target="_blank"></a>

    <div class="div-container">
        <ul class="post-categories">
            <li>
                <a href="https://www.example.net/category/conferences/" class="category-item">Conferences</a>
            </li>                                       
        </ul>
</div>

My goal is to modify the :

class="div-overlay"

According to the text value in :

class="category-item"

My attempt is not successful :

$(document).ready(function(){
var category = $(".category-item").html();
var newEvents = $(".div-overlay").attr('newclass','events');
var newConferences = $(".div-overlay").attr('newclass','conferences');

if (category = "Events"){
   newEvents;
} else if (category = "Conferences") {
    newConferences;
};
});

How can I make my script work ?

Details : working on WordPress with elementor.

Tags:

2

Answers


  1. 0

    You should use addClass methd

    $(document).ready(function(){
   var category = $(".category-item").html();
  
   if (category = "Events"){
      $(".div-overlay").addClass('events');
   } else if (category = "Conferences") {
      $(".div-overlay").addClass('conferences');
   };
});
    Login or Signup to reply.
  2. 0

    You can try this code :

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".category-item").each(function() {
        var cat_val = $(this).html();
        $(this).parents('.div-overlay').attr('newClass', cat_val);
    });
});
</script>
</head>
<body>

<div class="div-overlay">
    <a class="image" href="https://www.example.net/page-events/" target="_blank"></a>
    <div class="div-container">
        <ul class="post-categories">
            <li>
                <a href="https://www.example.net/category/events/" class="category-item">Events</a>
            </li>                                       
        </ul>
    </div>
</div>
    
<div class="div-overlay">
    <a class="image" href="https://www.example.net/page-conferences/" target="_blank"></a>
    <div class="div-container">
        <ul class="post-categories">
            <li>
                <a href="https://www.example.net/category/conferences/" class="category-item">Conferences</a>
            </li>                                       
        </ul>
    </div> 
</div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search