jQuery each()仅处理第一个匹配元素问题原因咨询

安全阿岳

2026-5-21

为什么你的jQuery代码只删除第一个匹配元素？

问题根源

你遇到的这个问题，核心在于jQuery的.each()遍历的是初始选中元素的静态快照。当你在循环中删除某个.sylsection父容器时，这个容器会连带里面的<p>元素一起从DOM中移除。但初始的元素集合是调用$('.sylsection p')时生成的固定列表，后续DOM的变更不会同步更新这个列表。

举个场景：假设页面有3个.sylsection，每个里面的<p>都是空的。初始集合是[p1, p2, p3]。当循环处理p1时，你删除了它的父容器s1，此时p1已经不在DOM中了。接下来循环到索引1，本应处理p2，但此时DOM结构已经变化，原来的p2对应的元素在集合中的关联已经失效，导致循环跳过了后续符合条件的元素，只完成了第一个删除操作。

修复方案

这里有两种可靠的解决办法，你可以根据习惯选择：

方案1：反向遍历元素

从最后一个元素开始往前处理，这样删除后面的父容器不会影响前面元素的索引位置，所有符合条件的元素都能被检查到：

// 把元素转换成数组后反向遍历
$.each($('.sylsection p').get().reverse(), function() {
  const $p = $(this);
  // 用trim()处理空白字符（比如空格、换行）的情况
  if ($p.text().trim() === '') {
    $p.closest('.sylsection').remove();
  }
});

方案2：先收集待删除元素，再批量删除

先遍历所有元素，把需要删除的.sylsection统一存入一个集合，最后一次性删除，避免遍历过程中DOM变更干扰循环：

const $toRemove = $();
$('.sylsection p').each(function() {
  const $p = $(this);
  if ($p.text().trim() === '') {
    $toRemove.add($p.closest('.sylsection'));
  }
});
// 一次性删除所有目标容器
$toRemove.remove();