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

Question

我需要让用户输入标记 (tables)，如果 table 不包含带有 class=[=19= 的 div ], 我需要添加 div & class。我需要忽略任何其他子元素，例如 p、span，并且只针对带有 tables.

的元素

<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 都需要一个包装器 div 和 class="table"，但忽略 p 和跨度。

[].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？谢谢

Answer 1

我想我明白你想做什么。这应该找到没有 "table" class 的子节点，并将它们包装在 div 和 "table" class 中。当您运行代码片段时，它不会显示任何内容，因为您的元素没有任何内容，但您应该能够检查它们以查看更改。

// 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>

Answer 2

你最好使用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>

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

Javascript how to append node in its correct index with wrapper

javascript

indexof

nodelist