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

The number range filter in ng-table is malfunctioning

Carousel issue with sliding on Bootstrap when deployed on various web servers

What is the best way to align icons in the center alongside text or paragraphs using react?

Extract specific form data to use in a jQuery.ajax request

Vue appears to be having trouble waiting for the axios Post request

Fundamentals of object property in jQuery and Javascript

Change the color of the navbar when scrolling using bootstrap and jquery

Using jQuery to manipulate input arrays that are dynamically generated

The Jquery map function is not returning selected options, always returning empty values. It seems to be avoiding the variable, although it functions properly on jsfiddle. There are

Exploring methods to conduct testing on an AngularJS application using AngularJS end-to-end testing, specifically focusing on scenarios involving multiple inputs

Ways to conceal the jqgrid thumbnail

What is the best way to supply arguments to a generic handler function?

Is there a way to update the href attribute within the script section in vue.js?

Is it necessary to wait for CSS to fully load on a static site built with Next.js?

Shut down two modal windows and then open one anew

Attempting to send a request from the front-end to the back-end is resulting in a 404 endpoint error

Issue with process.env.NODE_ENV not functioning appropriately in NodeJS when utilizing package.json scripts

Pass the initial value from a parent component to a child component in ReactJS without the need for state management

Choosing a root element in a hierarchy without affecting the chosen style of a child

When Select2 doesn't find a suitable option, the text "other" will be displayed