Tips for utilizing JavaScript getElementByClassName to retrieve all the elements within a ul without having to specify the class name in each li

Question

Tips for utilizing JavaScript getElementByClassName to retrieve all the elements within a ul without having to specify the class name in each li

Looking to tidy up my HTML/CSS. Is there a way to keep this JavaScript functioning without needing to add the class name to every li element within the ul? Any suggestions on how to improve the visual appeal and readability of the HTML code?

const ProfileForm = document.getElementsByClassName('profile_container');
const dash = document.getElementsByClassName('dashboard_buttons');
var index;
var array = [];
for (var i = 0; i < dash.length; i++) {

  array.push(dash[i]);

  dash[i].onclick = function() {
    index = array.indexOf(this);

    ProfileForm[index].style.display = "block";

    var check = ProfileForm[index];

    for (var i = 0; i < ProfileForm.length; i++) {
      if (ProfileForm[i].style.display == "block" && ProfileForm[i] != check) {
        ProfileForm[i].style.display = "none";
      }
    }
  }

}

<ul>
  <li class="dashboard_buttons"><i class="far fa-user"></i>Profile</li>
  <li class="dashboard_buttons"><i class="far fa-list-alt"></i>My Properties</li>
  <li class="dashboard_buttons"><i class="far fa-money-bill-alt"></i>My Offers</li>
  <li class="dashboard_buttons"><i class="fas fa-file-contract"></i>My Utilities & Ejari</li>
  <li class="dashboard_buttons"><i class="far fa-heart"></i>Favourite Properties</li>
  <li class="dashboard_buttons"><i class="far fa-envelope"></i>Messages</li>
  <li class="dashboard_buttons"><i class="fas fa-cogs"></i>Settings</li>
</ul>

javascript html css

Answer 1

Answer №1

For selecting li elements within a specific ul, you can use the following code:

document.querySelectorAll("ul#myList li")

. This allows you to target only the li elements within the ul with the ID of "myList". Remember, using

document.querySelectorAll("ul li")

will select all li elements in the entire document.

<ul id="myList"><li>...</li></ul>

document.querySelectorAll("ul#myList li")

Answer 2

For selecting li elements within a specific ul, you can use the following code:

document.querySelectorAll("ul#myList li")

. This allows you to target only the li elements within the ul with the ID of "myList". Remember, using

document.querySelectorAll("ul li")

will select all li elements in the entire document.

<ul id="myList"><li>...</li></ul>

document.querySelectorAll("ul#myList li")

Answer 3

Answer №2

If you want to efficiently handle all events within a parent element, consider using event delegation. By utilizing event listeners over inline event handlers, you can achieve this while maintaining a clean separation between HTML and JavaScript.

To provide a simple demonstration, the code snippet below showcases how to unhighlight all list items and then highlight the clicked one. Please refer to the comments within the code for a more detailed explanation.

Does this example help clarify how you can accomplish your desired functionality?

// When the `ul` element is clicked, call `highlightItem` function
const list = document.getElementsByClassName("list")[0];
list.addEventListener("click", highlightItem);

// Define the event listener function
function highlightItem(event){ // The listener has access to the triggering event

  const clickedElement = event.target; // Utilize the event's `target` property

  // Check if the click occurred on an `li` element
  if(clickedElement.tagName.toLowerCase() == "li"){

    // Select all list items
    const items = list.querySelectorAll("li");

    // Iterate through the collection
    for(let item of items){

      // Update the classList of the current item in the loop
      item.classList.remove("highlight");

      // Add or remove class based on whether it was the target of the click event
      if(item == event.target){ item.classList.add("highlight"); }
    }
  }
}

.highlight{ background-color: yellow; }

<ul class="list">
  <li>Profile</li>
  <li>My Properties</li>
  <li>My Offers</li>
</ul>

Answer 4

If you want to efficiently handle all events within a parent element, consider using event delegation. By utilizing event listeners over inline event handlers, you can achieve this while maintaining a clean separation between HTML and JavaScript.

To provide a simple demonstration, the code snippet below showcases how to unhighlight all list items and then highlight the clicked one. Please refer to the comments within the code for a more detailed explanation.

Does this example help clarify how you can accomplish your desired functionality?

// When the `ul` element is clicked, call `highlightItem` function
const list = document.getElementsByClassName("list")[0];
list.addEventListener("click", highlightItem);

// Define the event listener function
function highlightItem(event){ // The listener has access to the triggering event

  const clickedElement = event.target; // Utilize the event's `target` property

  // Check if the click occurred on an `li` element
  if(clickedElement.tagName.toLowerCase() == "li"){

    // Select all list items
    const items = list.querySelectorAll("li");

    // Iterate through the collection
    for(let item of items){

      // Update the classList of the current item in the loop
      item.classList.remove("highlight");

      // Add or remove class based on whether it was the target of the click event
      if(item == event.target){ item.classList.add("highlight"); }
    }
  }
}

.highlight{ background-color: yellow; }

<ul class="list">
  <li>Profile</li>
  <li>My Properties</li>
  <li>My Offers</li>
</ul>

Answer 5

Answer №3

One approach is to utilize query selector method

// Retrieve all 'li' tags throughout the page that have a class of "example"

let elements = document.querySelectorAll("li.example");

Answer 6

One approach is to utilize query selector method

// Retrieve all 'li' tags throughout the page that have a class of "example"

let elements = document.querySelectorAll("li.example");

Answer 7

Answer №4

Try replacing document.getElementByClassName with document.querySelectorAll

Answer 8

Try replacing document.getElementByClassName with document.querySelectorAll

Tips for utilizing JavaScript getElementByClassName to retrieve all the elements within a ul without having to specify the class name in each li

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Leveraging the CSS-Element-Queries Library for emulating the functionality of CSS media queries

Implement a hover animation for the "sign up" button using React

Effortless login authentication using Disqus through Google or Facebook tokens

Initiate an AJAX call and in the event that a particular object is found in the JSON response, proceed to send a subsequent request targeting

Navigate to a specific hidden div that is initially invisible

I'm facing an issue with SSRProvider in my NextJs application

I am attempting to adjust the color of the active tab, but I seem to be encountering issues in my code. Can anyone help me

The data from the Subscribe API call is gradually loading within the ngOnInit() function

"Troubleshooting a problem with Mongoose's findOne.populate method

Tactics for postponing a js function post-click

Challenges with dropdown menus in the sub navigation area

Chatting with a Discord bot

Deactivated dropdown menu options with the help of Twitter's bootstrap framework

The initial render of children elements in React Google Maps Api may not display properly

Utilizing PHP and AJAX to Extract Information from a MySQL Database

Hapi/Node.js Reference Error for Request: Troubleshooting the Issue

Retrieve the parent object from the policy field type

How can I pass an argument to Node within a package.json script instead of the script itself?

How to Manage Empty Lines in HTML Documents within WordPress

Animated smooth updates in d3 line graphs are the key to creating dynamic and