Javascript如何使用包装器将节点附加到正确的索引中答案

【问题标题】：Javascript how to append node in its correct index with wrapperJavascript如何使用包装器将节点附加到正确的索引中
【发布时间】：2019-05-16 14:47:41
【问题描述】：

我需要让用户输入标记（表格），如果表格不包含 class="table" 的 div，我需要添加 div & 类。我需要忽略任何其他子元素，例如 p、span，并且只针对带有表格的元素。

<div class="parent">
  <div class="table"><table></table></div>
  <div class="table"><table></table></div>
  <table></table>
  <div><table></table></div>
  <div class="table"><table></table></div>
  <p></p>
  <span></span>
</div>

您可以在上面的节点列表中看到，节点索引 2,3 都需要一个 class="table" 的包装 div，但忽略 p 和 span。

[].map.call(table, (node) => {
  if (!node.parentNode.classList.contains('table')) {
    const parent = document.getElementsByClassName('parent');
    [].map.call(parent, (nodeChild) => {
      const addWrap = document.createElement('div');
      addWrap.classList.add('table');
      addWrap.appendChild(node);
      nodeChild.append(addWrap);
    });
  }
});

我已经尝试过了，但它在索引底部附加了一个包装 div 的节点。如何让节点以正确的顺序附加到包装器 div 中？谢谢。

【问题讨论】：

所以.parent 的所有与选择器div.tabble 不匹配的直接子元素都应该用那个元素包裹？
是的，所以任何时候用户进入一个表格，如果他们不添加一个 div class="table" 作为直接父级，它应该添加 div 和类。

标签： javascript indexof nodelist

【解决方案1】：

你最好使用 for/loop（这里使用 map 是一种反模式）来遍历父节点的子节点，并用新创建的元素替换当前子节点。

检查开发工具中的输出以查看更改。

const parent = document.querySelector('.parent');
const { childNodes } = parent;

for (let i = 0; i < childNodes.length; i++) {
  const el = childNodes[i];

  // If the node type is an element
  if (el.nodeType === 1) {

    // If element is a div add a class
    // if it's missing
    if (el.tagName === 'DIV' && !el.classList.contains('table')) {
      el.classList.add('table');
    }

    if (el.tagName === 'TABLE') {
      const div = document.createElement('div');
      div.classList.add('table');
      div.appendChild(el);

      // Replace the child node with the new div node
      parent.replaceChild(div, childNodes[i]);    
    }

  }
};

<div class="parent">
  <div class="table"><table></table></div>
  <div class="table"><table></table></div>
  <table></table>
  <div><table></table></div>
  <div class="table"><table></table></div>
  <p></p>
  <span></span>
</div>

【讨论】：

这很好，但是它需要忽略任何其他不包含'table'作为子元素的元素
这不是最初的问题。三个小时后用全新的要求更新您的问题有点垃圾。
是的，很抱歉更新问题。

【解决方案2】：

我想我明白你想要做什么。这应该找到没有“table”类的子节点，并将它们包装在具有“table”类的 div 中。当您运行 sn-p 时，它不会显示任何内容，因为您的元素没有任何内容，但您应该能够检查它们以查看更改。

// get all parent divs
var parents = document.getElementsByClassName("parent");

// loop over parent divs
for (var i = 0; i < parents.length; i++) {

  // get a single parent div
  var parent = parents[i];

  // loop over child nodes
  for (var j = 0; j < parent.childNodes.length; j++) {

    // get a single child node
    var childNode = parent.childNodes[j];

    // if this child node is type 1 (element node)
    // and does not have a class of table
    if (
      childNode.nodeType === 1 &&
      !childNode.classList.contains("table")
    ) {
      // create a new div element
      var wrap = document.createElement('div');
      // give it a class of table
      wrap.classList.add("table");
      // append a clone of the child node
      wrap.appendChild(childNode.cloneNode());
      // replace the old child node with the wrapped child node
      parent.replaceChild(wrap, childNode);
    }

  }

}

<div class="parent">
  <div class="table"></div>
  <div class="table"></div>
  <table></table>
  <div></div>
  <div class="table"></div>
</div>

【讨论】：