如何用JavaScript为li首元素增删类及转换指定jQuery滚动事件代码

Hey there! Let's tackle your two JavaScript questions one by one:

1. Adding/Removing Classes to the First Child of an <li> Element #

To modify classes on the first child of an <li> element using vanilla JavaScript, follow these straightforward steps:

• First, select your target <li> element (use querySelector, getElementById, or getElementsByClassName depending on your HTML structure).
• Access its first child element with firstElementChild (this skips text nodes and grabs the actual HTML element).
• Use the classList API to add, remove, or toggle classes—it’s the cleanest native way to handle class modifications.

Example Code Snippets #

Single <li> Target

// Select the specific <li> (adjust the selector to match your markup)
const targetLi = document.querySelector('.nav-item');

// Get its first child element
const firstChildElement = targetLi.firstElementChild;

// Add a class
firstChildElement.classList.add('highlight');

// Remove a class
firstChildElement.classList.remove('dimmed');

// Toggle a class (add if missing, remove if present)
firstChildElement.classList.toggle('active');

Multiple <li> Elements

If you need to update the first child of every <li> in a container:

const allListItems = document.querySelectorAll('.menu li');
allListItems.forEach(li => {
  const firstChild = li.firstElementChild;
  if (firstChild) { // Guard against <li> elements with no child elements
    firstChild.classList.add('menu-link-active');
    // firstChild.classList.remove('menu-link-inactive');
  }
});

2. Converting jQuery Scroll Event Code to Vanilla JavaScript #

Let’s translate your jQuery scroll logic into native JavaScript while preserving the exact functionality. Here’s how it works:

Original jQuery Code #

$(window).scroll(function(){ 
  if ($(window).scrollTop() >=50) { 
    $('.responsive-header .social-icons .social-icon li').not(':first-child').addClass('hidden'); 
    $('.responsive-header .social-icons .social-icon li').not(':first-child').removeClass('show'); 
  } 
});

Equivalent Vanilla JavaScript Code #

// Attach scroll event listener to the window
window.addEventListener('scroll', function() {
  // Get current scroll position (compatible with modern and older browsers)
  const scrollPosition = window.scrollY || document.documentElement.scrollTop;
  
  if (scrollPosition >= 50) {
    // Select all target <li> elements except the first child
    const socialListItems = document.querySelectorAll('.responsive-header .social-icons .social-icon li:not(:first-child)');
    
    // Loop through each element to update classes
    socialListItems.forEach(li => {
      li.classList.add('hidden');
      li.classList.remove('show');
    });
  }
});

Quick Notes: #

• window.scrollY is the modern method to get scroll distance, and document.documentElement.scrollTop adds fallback support for older browsers.
• Using querySelectorAll with the :not(:first-child) pseudo-selector lets us directly target the desired elements without extra filtering.
• classList.add() and classList.remove() are the native alternatives to jQuery’s addClass() and removeClass().

内容的提问来源于stack exchange，提问作者Nikita garg