如何获取父div下多子元素文本并添加指定分隔符？

要实现把.bigdiv下子元素的文本用&分隔（最终得到" Text 1 & Text 2 "），你可以通过以下步骤处理：

假设你的HTML结构是这样的： #

<div class="bigdiv">
  <h3>Text 1</h3>
  <p>Text 2</p>
  <!-- 可能还有其他子元素 -->
</div>

方案1：使用jQuery实现 #

// 提取所有非空的直接子元素文本，并用" & "分隔
const combinedText = $(".bigdiv").children()
  .map(function() {
    // 修剪文本前后的空白，避免空内容干扰
    return $(this).text().trim();
  })
  .get() // 把jQuery对象转换为普通数组
  .filter(text => text) // 过滤掉空字符串（比如没有文本的子元素）
  .join(" & ");

// 如果需要前后添加空格，直接用模板字符串包裹
const finalResult = ` ${combinedText} `;
console.log(finalResult); // 输出：" Text 1 & Text 2 "

方案2：原生JavaScript实现（无需jQuery） #

如果你不想依赖jQuery，也可以用原生JS完成：

const bigDiv = document.querySelector(".bigdiv");
const texts = Array.from(bigDiv.children)
  .map(element => element.textContent.trim())
  .filter(text => text.length > 0)
  .join(" & ");

const finalResult = ` ${texts} `;
console.log(finalResult);

关键细节说明： #

• 用.children()（jQuery）或bigDiv.children（原生）获取直接子元素，如果需要包含所有后代元素，把它换成.find("*")（jQuery）或bigDiv.querySelectorAll("*")（原生）即可。
• .trim()和.filter()是为了避免空文本或纯空格的子元素导致出现多余的&符号。
• 最后用模板字符串添加前后空格，完全匹配你想要的输出格式。

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