Instructions on adding a class to a span within a div upon clicking the div

Question

Instructions on adding a class to a span within a div upon clicking the div

Is there a way to dynamically add a class to the span element inside a specific div when that div is clicked? There are multiple divs and spans with the same class name.

$('.menu_item_conteiner').click(function() {
  $('.menu_item_conteiner').removeClass("tab_selected");
  $(this).addClass('tab_selected');

  // This adds a class to the last span, not the one inside the clicked div.
  // $(".menu_item_conteiner span:last").addClass("show_element");

});

HTML

<span class="menu_item_conteiner">
   <span class="menu_item">
     Text
  </span>
  <span class="menu_imagen_icon">
  </span>
</span>

jquery html css

Answer 1

Answer №1

Below is the code needed for this specific task:

$('.menu_item_container').click(function() {
   $('span.menu_item').removeClass('active');
   $(this).find('span.menu_item').addClass('active');
}

Answer 2

Below is the code needed for this specific task:

$('.menu_item_container').click(function() {
   $('span.menu_item').removeClass('active');
   $(this).find('span.menu_item').addClass('active');
}

Answer 3

Answer №2

Here is my approach:

When the 'menu_item_conteiner' element is clicked, this code will add the class 'otherclass' to the span element:
$('.menu_item_conteiner').click(function() {
   var d = document.getElementById("span");
   d.className = d.className + " otherclass";
}

Alternatively, you can achieve the same result with this code:

Another way to add a class ('some_other_class') to the span element when 'menu_item_conteiner' is clicked:
$('.menu_item_conteiner').click(function() {
   var d = document.getElementById("span");
   d.addClass( 'some_other_class' );
}

Both methods will append the specified class to the targeted span element.

Answer 4

Here is my approach:

When the 'menu_item_conteiner' element is clicked, this code will add the class 'otherclass' to the span element:
$('.menu_item_conteiner').click(function() {
   var d = document.getElementById("span");
   d.className = d.className + " otherclass";
}

Alternatively, you can achieve the same result with this code:

Another way to add a class ('some_other_class') to the span element when 'menu_item_conteiner' is clicked:
$('.menu_item_conteiner').click(function() {
   var d = document.getElementById("span");
   d.addClass( 'some_other_class' );
}

Both methods will append the specified class to the targeted span element.

Instructions on adding a class to a span within a div upon clicking the div

Answer №1

Answer №2

Similar questions

Oxygen-style with a sleek, shadow-free frame

The implementation of $(this).addClass within AJAX success is not yielding the desired results

issues with jquery progress bar not updating value

Error message: Iframe chrome encountered a Uncaught DOMException when attempting to access the 'localStorage' property from 'Window': Document does not have permission

Discovering what is impeding the rendering of a webpage

Transformation of looks post a refresh

Yeoman webapp error: Issue with incorrect CSS path in subfolder

Although JQuery is able to remove a row from the page, the record in the database is not

What is the best way to activate a click event on a dynamically generated input element with the type of 'file'?

Only initiate the loading of the iframe within the div upon clicking a specific element

Adjusting the line-height and baseline to accommodate various screen sizes on both mobile and desktop

Retrieve the value of an AngularJS expression and display it in a window alert using AngularJS

How should we structure our JavaScript code: MVC or self-rendering components?

Ways to stop the floating label from blending with the input field

Try using the doubletap event instead of dblclick in jquery mobile, although it seems to be ineffective on iPad devices

Transferring information to the controller and refreshing the interface (Single-page design)

Using jQuery, it is possible to loop through each row in a table by targeting the table element

Popup to confirm JqGrid inline editing

Organize the structure of a JSON object in AngularJS to generate a hierarchical unordered list

Avoid repeating media queries in MUI JSS by combining them efficiently