如何用jQuery遍历.selector元素并延迟为其及子元素添加类？

Got it, let's sort this out for you! The main issue with your current code is that jQuery's .delay() only affects methods in the animation queue (think things like .fadeOut() or .slideUp()). Since .addClass() runs right away, your delay isn't actually waiting before adding the 'show' class like you want.

Here are two solid ways to implement your desired logic: wait x*i seconds to add the 'show' class to each .selector element, then wait another x*i seconds to add the class to its .achildselector child.

Option 1: Use setTimeout (Straightforward & Reliable) #

This is the most intuitive approach for non-animation timing, since setTimeout guarantees a delay before running your code, no matter what.

// Set your base delay time (x, in milliseconds)
const baseDelay = 1000; // 1 second per step

$(".selector").each(function(index) {
  const $currentElement = $(this);
  // Calculate multiplier (index starts at 0, so +1 gives 1, 2, 3...)
  const delayMultiplier = index + 1;

  // First delay: Add 'show' class after x*i seconds
  setTimeout(() => {
    $currentElement.addClass('show');

    // Second delay: Add class to child after another x*i seconds
    setTimeout(() => {
      $currentElement.find('.achildselector').addClass('class');
    }, baseDelay * delayMultiplier);
  }, baseDelay * delayMultiplier);
});

Key Notes: #

• We store $(this) in $currentElement to avoid re-selecting the same DOM element multiple times (small performance win, but good practice).
• The inner setTimeout only runs after the first one finishes, so the child class is added after the parent's 'show' class and another full delay period.

Option 2: Use jQuery's Animation Queue #

If you prefer to stick within jQuery's animation workflow, you can push your class additions into the queue so .delay() works as expected.

const baseDelay = 1000;

$(".selector").each(function(index) {
  const delayMultiplier = index + 1;
  $(this)
    // Wait x*i seconds first
    .delay(baseDelay * delayMultiplier)
    // Add 'show' class to the parent
    .queue(function(next) {
      $(this).addClass('show');
      next(); // Don't forget this—lets the queue move to the next step
    })
    // Wait another x*i seconds
    .delay(baseDelay * delayMultiplier)
    // Add class to the child element
    .queue(function(next) {
      $(this).find('.achildselector').addClass('class');
      next();
    });
});

Key Notes: #

• Every function you pass to .queue() needs a next() call to tell jQuery to proceed with the next item in the queue. Skip this, and the queue will get stuck!
• This method ties into jQuery's existing animation system, so it's great if you're already using other animation methods on these elements.

Either approach will get you the sequential, delayed class additions you're looking for. The setTimeout method is usually easier to read for simple timing, while the queue method integrates nicely if you're working with other jQuery animations.

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