Ways to dynamically assign a class to a single element within a group of identical elements

Question

Ways to dynamically assign a class to a single element within a group of identical elements

I have three identical items in the DOM. Specifically, I am referring to a moving line

<span class="caret"></span>

<ul>
  <li class="nav-item-1">
   <a href="#">ITEM 1</a>  
   <span class="caret"></span>
  </li>  
</ul>

<ul>
  <li class="nav-item-2">
   <a href="#">ITEM 2</a>  
   <span class="caret"></span>
  </li>  
</ul>

<ul>
  <li class="nav-item-3">
   <a href="#">ITEM 3</a>  
   <span class="caret"></span>
  </li>  
</ul>

Scenario: When I click on the first

<span class="caret"></span>

, it should receive the class "open", while the others remain with only the class "caret". When I click on the second

<span class="caret"></span>

, it should also receive the class "open", and the first one should lose this class. Is this achievable? My attempted solution is as follows:

$(".caret").click(function () {
  $(this).data('clicked', true);
  if ($('.caret').data('clicked')) {
    $(".caret").toggleClass('opened');
  }
});

Although this solution works, it applies the toggleClass('opened') to all elements with the class "caret" instead of just the one that was clicked.

javascript jquery html css

Answer 1

Answer №1

Initially, you correctly utilized $(this) but then resorted back to using $('.caret'). Here is the amended solution:

$(".caret").click(function () {
     $(this).toggleClass('opened');
});

The asker has requested to close all other instances of .caret classes:

$(".caret").click(function () {
    $(".caret").removeClass('opened');
    $(this).addClass('opened');
});

Answer 2

Initially, you correctly utilized $(this) but then resorted back to using $('.caret'). Here is the amended solution:

$(".caret").click(function () {
     $(this).toggleClass('opened');
});

The asker has requested to close all other instances of .caret classes:

$(".caret").click(function () {
    $(".caret").removeClass('opened');
    $(this).addClass('opened');
});

Answer 3

Answer №2

Your HTML code contains errors that will result in incorrect display of the markup in the browser. Without knowing your desired outcome, I am unable to provide a specific solution for fixing it. However, once you address the issues, the basic code structure should be as follows:

$('.caret').on('click', function () {
    $('.caret.opened') 
      .not(this) 
      .removeClass('opened'); 
    $(this)
      .toggleClass('opened'); 
});

If you want one caret to always remain open:

$('.caret').on('click', function () {
    $('.caret.opened') 
      .removeClass('opened'); 
    $(this)
      .addClass('opened'); 
});

Answer 4

Your HTML code contains errors that will result in incorrect display of the markup in the browser. Without knowing your desired outcome, I am unable to provide a specific solution for fixing it. However, once you address the issues, the basic code structure should be as follows:

$('.caret').on('click', function () {
    $('.caret.opened') 
      .not(this) 
      .removeClass('opened'); 
    $(this)
      .toggleClass('opened'); 
});

If you want one caret to always remain open:

$('.caret').on('click', function () {
    $('.caret.opened') 
      .removeClass('opened'); 
    $(this)
      .addClass('opened'); 
});

Answer 5

Answer №3

I have a hunch that maybe you intended this

It is not considered valid HTML to have a span within a ul tag

$(".nav-item a").on("click",function(e) {
  e.preventDefault();
  $(".caret").removeClass('opened');
  $(this).next(".caret").addClass('opened'); // could toggle if needed
});

.caret::after { content: "🡁" }
.opened::after { content: "🠿" }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="nav-item" id="nav-1"><a href="#">ITEM</a><span class="caret"></span></li>
</ul>
<ul>
  <li class="nav-item" id="nav-2"><a href="#">ITEM</a><span class="caret"></span></li>
</ul>

<ul>
  <li class="nav-item" id="nav-3"><a href="#">ITEM</a><span class="caret"></span></li>
</ul>

Answer 6

I have a hunch that maybe you intended this

It is not considered valid HTML to have a span within a ul tag

$(".nav-item a").on("click",function(e) {
  e.preventDefault();
  $(".caret").removeClass('opened');
  $(this).next(".caret").addClass('opened'); // could toggle if needed
});

.caret::after { content: "🡁" }
.opened::after { content: "🠿" }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="nav-item" id="nav-1"><a href="#">ITEM</a><span class="caret"></span></li>
</ul>
<ul>
  <li class="nav-item" id="nav-2"><a href="#">ITEM</a><span class="caret"></span></li>
</ul>

<ul>
  <li class="nav-item" id="nav-3"><a href="#">ITEM</a><span class="caret"></span></li>
</ul>

Answer 7

Answer №4

If you are not already using jQuery in your project, it is not necessary for this particular task.

const navItems = [...document.querySelectorAll("[class^=nav-item-")];

navItems.forEach(item => {
  item.addEventListener("click", () => {
    const opened = document.querySelector(".opened");

    if (opened) {
      opened.classList.remove("opened");
    }

    item.parentElement.querySelector(".caret").classList.add("opened");
  });
});

/* This code is for demonstration purposes only */

.caret.opened:after {
  content: "opened";
}

<ul>
  <li class="nav-item-1">
    <a href="#">ITEM</a>
  </li>
  <span class="caret"></span>
</ul>
<ul>
  <li class="nav-item-2">
    <a href="#">ITEM</a>
  </li>
  <span class="caret"></span>
</ul>
<ul>
  <li class="nav-item-3">
    <a href="#">ITEM</a>
  </li>
  <span class="caret"></span>
</ul>

Answer 8

If you are not already using jQuery in your project, it is not necessary for this particular task.

const navItems = [...document.querySelectorAll("[class^=nav-item-")];

navItems.forEach(item => {
  item.addEventListener("click", () => {
    const opened = document.querySelector(".opened");

    if (opened) {
      opened.classList.remove("opened");
    }

    item.parentElement.querySelector(".caret").classList.add("opened");
  });
});

/* This code is for demonstration purposes only */

.caret.opened:after {
  content: "opened";
}

<ul>
  <li class="nav-item-1">
    <a href="#">ITEM</a>
  </li>
  <span class="caret"></span>
</ul>
<ul>
  <li class="nav-item-2">
    <a href="#">ITEM</a>
  </li>
  <span class="caret"></span>
</ul>
<ul>
  <li class="nav-item-3">
    <a href="#">ITEM</a>
  </li>
  <span class="caret"></span>
</ul>

Answer 9

Answer №5

There are some errors in the HTML code that need to be fixed. The correct syntax should look something like the example below. Let's also incorporate CSS to display what a caret looks like.

Then, we can use JavaScript to handle the toggle functionality.

$("ul").click(function (e) {
  var caret = $(this).find('.caret');
  $('.caret').data('clicked', false);
  $('.caret').removeClass('opened');

  caret.data('clicked', true);
  caret.toggleClass('opened');
});

.caret {
  background-color: red;
  border: 1px solid blue;
  width: 10px;
  height: 10px;
  display: none;
}

.opened {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="nav-item-1">
    <a href="#">ITEM</a>
    <span class="caret"></span>
  </li>    
</ul>

<ul>
  <li class="nav-item-2">
    <a href="#">ITEM</a>
    <span class="caret"></span>
  </li>    
</ul>

<ul>
  <li class="nav-item-3">
    <a href="#">ITEM</a>
    <span class="caret"></span>
  </li>    
</ul>

Answer 10

There are some errors in the HTML code that need to be fixed. The correct syntax should look something like the example below. Let's also incorporate CSS to display what a caret looks like.

Then, we can use JavaScript to handle the toggle functionality.

$("ul").click(function (e) {
  var caret = $(this).find('.caret');
  $('.caret').data('clicked', false);
  $('.caret').removeClass('opened');

  caret.data('clicked', true);
  caret.toggleClass('opened');
});

.caret {
  background-color: red;
  border: 1px solid blue;
  width: 10px;
  height: 10px;
  display: none;
}

.opened {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="nav-item-1">
    <a href="#">ITEM</a>
    <span class="caret"></span>
  </li>    
</ul>

<ul>
  <li class="nav-item-2">
    <a href="#">ITEM</a>
    <span class="caret"></span>
  </li>    
</ul>

<ul>
  <li class="nav-item-3">
    <a href="#">ITEM</a>
    <span class="caret"></span>
  </li>    
</ul>

Answer 11

Answer №6

Kindly double check your HTML tag for errors
ensure anchor closing tags are not missed out
include the .nav class in each li element

$(".nav").on('click', function() {
    if ($(this).next('.caret').hasClass('clicked opened')) {
        $('.caret').removeClass('clicked opened');
    } else {
        $('.caret').removeClass('clicked opened');
        $(this).next('.caret').addClass('clicked opened');
    }
});

https://jsfiddle.net/n56b84t9/2/

Answer 12

Kindly double check your HTML tag for errors
ensure anchor closing tags are not missed out
include the .nav class in each li element

$(".nav").on('click', function() {
    if ($(this).next('.caret').hasClass('clicked opened')) {
        $('.caret').removeClass('clicked opened');
    } else {
        $('.caret').removeClass('clicked opened');
        $(this).next('.caret').addClass('clicked opened');
    }
});

https://jsfiddle.net/n56b84t9/2/

Ways to dynamically assign a class to a single element within a group of identical elements

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

I recently designed a form using a combination of HTML and JavaScript in order to display different dialogues depending on the number of selections made. Unfortunately, the alert function does not seem to be functioning

The Tailwind style did not completely translate when applied to the content of dangerouslySetInnerHtml

Javascript error specific to Internet Explorer. Can't retrieve the value of the property 'childNodes'

Choose a child of a parent by specifying the index

Ways to parse the data from a response received from an Axios POST request

Can you explain the concept of "cascading" within CSS?

Application crash imminent, alert: Uncaught TypeError detected - Unable to access property 'some' of undefined within React

What is the role of the app.use method in ExpressJS in handling URL redirects that end with a "/"?

Iconic Side Navigation with collapsed button malfunctioning due to negative positioning

A unique way to present data: An HTML table featuring four fixed columns with horizontal scrolling

Having trouble resolving the FancyBox Jquery conflict and unable to find a solution

AngularJS nested menu functionality not functioning properly

Efficient Error Handling in Next.JS with Apollo GraphQL Client

When changing the dropdown option on a separate page in React/Next JS, all checkboxes show the clicked style as a result of utilizing useState

both modules loading at the same time in AngularJS

The additional values inserted into the form using jQuery are not being recognized or passed to AngularJS

The ajax success() function is failing to function properly when attempting to make a call

Locating the jQuery element just one element next to it

Is it possible to create a return type structure in TypeScript that is determined by the function's argument?

Utilizing jQuery for dynamic horizontal positioning of background images in CSS