如何为无父级的RSS Feed元素序列添加包裹容器？

嘿，我来帮你搞定这个问题！你遇到的情况很典型——RSS工具输出的内容没有按单篇文章分组，所有元素平级堆叠，又没法直接用.wrap()给每篇内容加父容器。不过咱们可以通过识别那些用来分隔文章的<br>标签，手动把每篇文章的元素打包到独立的容器里。先提醒一句：HTML里id不能重复使用，所以建议用class="article"代替id="article"，避免踩规范的坑。

方法一：用jQuery实现（如果你的环境支持jQuery） #

假设你的RSS内容都放在一个类名为rss-container的容器里，代码如下：

// 定位RSS内容容器
const $rssContainer = $('.rss-container');

// 把连续的<br>替换成临时分隔标记，方便后续分割
$rssContainer.find('br').filter(function() {
  return $(this).next('br').length > 0;
}).replaceWith('<div class="article-separator"></div>');

// 将分隔标记之间的内容统一包裹成article容器
$rssContainer.contents().each(function() {
  let $currentArticleElements = $();
  // 收集当前元素到下一个分隔标记之间的所有内容
  $(this).nextUntil('.article-separator').addBack().each(function() {
    $currentArticleElements = $currentArticleElements.add(this);
  });
  // 包裹内容（跳过分隔标记本身）
  if ($currentArticleElements.length > 0 && !$(this).hasClass('article-separator')) {
    $currentArticleElements.wrapAll('<div class="article"></div>');
  }
});

// 清理临时分隔标记
$('.article-separator').remove();

方法二：原生JavaScript实现（无jQuery依赖） #

如果你的环境不能用jQuery，用原生JS也能搞定：

// 定位RSS内容容器
const rssContainer = document.querySelector('.rss-container');
const allNodes = Array.from(rssContainer.childNodes);
let currentArticleNodes = [];

allNodes.forEach(node => {
  // 识别连续的<br>作为文章分隔线
  if (node.nodeName === 'BR' && node.nextSibling && node.nextSibling.nodeName === 'BR') {
    // 把当前收集的元素包裹成article容器
    if (currentArticleNodes.length > 0) {
      const articleDiv = document.createElement('div');
      articleDiv.className = 'article';
      currentArticleNodes.forEach(el => articleDiv.appendChild(el));
      rssContainer.insertBefore(articleDiv, node);
      currentArticleNodes = [];
    }
    // 移除这两个用来分隔的<br>
    rssContainer.removeChild(node.nextSibling);
    rssContainer.removeChild(node);
  } else if (
    node.nodeType === Node.ELEMENT_NODE || 
    (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '')
  ) {
    // 收集非空的文本节点和元素节点（跳过空文本）
    currentArticleNodes.push(node);
  }
});

// 处理最后一篇文章（避免末尾没有<br>分隔的情况）
if (currentArticleNodes.length > 0) {
  const articleDiv = document.createElement('div');
  articleDiv.className = 'article';
  currentArticleNodes.forEach(el => articleDiv.appendChild(el));
  rssContainer.appendChild(articleDiv);
}

核心思路 #

1. 识别文章边界：利用你提到的<br><br>作为每篇文章的分隔标记；
2. 收集单篇内容：把分隔标记之间的所有元素（标题、图片、链接等）收集起来；
3. 包裹父容器：将收集到的元素统一包裹到class="article"的div里；
4. 清理冗余标签：移除用来分隔的<br>，避免页面出现多余空行。

这样处理后，每篇RSS文章就有了独立的父容器，你可以通过CSS轻松控制每篇文章的样式，比如添加间距、边框等。

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