Estoy buscando modificar el nombre de clase de un div según el nombre de otro div. No puedo hacer que funcione con JQuery.
Aquí está la estructura html:
<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>Mi objetivo es modificar el:
class="div-overlay"Según el valor del texto en:
class="category-item"Mi intento no tiene éxito:
$(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; }; });¿Cómo puedo hacer que mi script funcione?
Detalles: trabajando en Wordpress con elementor.
Deberías usar addClass
$(document).ready(function(){ var category = $(".category-item").html(); if (category = "Events"){ $(".div-overlay").addClass('events'); } else if (category = "Conferences") { $(".div-overlay").addClass('conferences'); }; });Puedes probar este código:
<!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>