javascript - 如果父元素重复则移动子元素

Question

只是在这里关注精益 js。如果父元素名称重复，是否可以将子元素从一个父元素移动到另一个父元素下？

示例:

如何将其他内容和类似内容放在单个合成父项下，并将其他人放在一个内容下，并删除重复项。这可以用 javascript 或 jquery 实现吗？谢谢!

<li>
  <h4>Composition</h4>
  <p>Something</p>
</li>
<li>
  <h4>Composition</h4>
  <p>Something else</p>
</li>
<li>
  <h4>Composition</h4>
  <p>Something like</p>
</li>

<li>
  <h4>Content</h4>
  <p>Someone</p>
</li>
  <h4>Content</h4>
  <p>Someone else</p>
</li>

这是我到目前为止得到的js，我一直坚持将 p 项移动到第一个重复的元素，每个元素都在它的父元素下。事情是父元素没有特定的 id 或类:

const $technicalProp = $("[data-surface-prop]");
const technicalVal = $("[data-surface-val]");
let duplicate = {};

$technicalProp.each(function() {
  let txt = $(this).text();

  if (duplicate[txt]) {
     $(this).remove(); // this only removes the dulicate names I also need to move chlidren
  }
  else {
    duplicate[txt] = true;
  }
});

Answer 1

是的，我不知道这是否是最好的方法，但这可行，我的方法是创建一个数组对象(js)作为你想要的新模型

逻辑是我提取 h4 的文本并检查数据变量是否已在那里注册，如果尚未注册，则将其推送到数据和子文本 (p)如果已经注册，那么我只推送子文本

let data = [];
        const lists = document.querySelectorAll('li').forEach( (li, liIdx) => {
            let parentName = li.querySelector('h4').innerHTML;
            let childName = li.querySelector('p').innerHTML;
            let isRegistered = data.find( x => x.parentName === parentName);
            if(!isRegistered) {
                childName = [childName];
                data.push({ parentName, childName});
            }else {
                console.log(isRegistered)
                isRegistered.childName.push(childName);
            }
        });

这就是我们得到的

0:
childName: (3) ["Something", "Something else", "Something like"]
parentName: "Composition"
1:
childName: (2) ["Someone", "Someone else"]
parentName: "Content"

然后重置 ol 标签并重建其项目

let ol = document.querySelector('ol');
ol.innerHTML = '';

        data.map( d => {
            let p = d.childName.map( c => `<p>${c}</p>`).join('');
            ol.insertAdjacentHTML('beforeend', `
                <li>
                    <h4>${d.parentName}</h4>
                    ${p}
                </li>
            `);
        })