jQuery提取对应h2文本创建新div 解决多实例文本重复问题

问题原因 #

原有代码直接全局读取所有.addOutline下的h2文本，jQuery的text()方法会把所有匹配元素的文本合并成一个字符串，给所有.addOutline追加时统一用了这个字符串，所以所有新增的div文本都一致，无法匹配对应容器的h2内容。

解决方案 #

遍历每个.addOutline容器，分别读取当前容器内的h2文本，再追加到对应位置即可，代码如下：

$( document ).ready(function() {
  $(".addOutline").each(function() {
    // 获取当前容器内对应h2的文本，trim可去除前后多余的空格换行
    const headingText = $(this).find("h2.heading-title").text().trim();
    // 向当前容器内的子div追加新元素，和h2保持同级
    $(this).children("div").append(`<div class="outlineHeader horizontal">${headingText}</div>`);
  })
})

如果你需要把新增div直接放在.addOutline的直接子节点位置，而非内部子div里，把.children("div")去掉即可。

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