JavaScript, как добавить узел в его правильный индекс с помощью оболочки - PullRequest
Новая
       19

JavaScript, как добавить узел в его правильный индекс с помощью оболочки

0 голосов
/ 15 декабря 2018

Мне нужно получить введенную пользователем разметку (таблицы), и если таблица не содержит div с class = "table", мне нужно добавить div & class.Мне нужно игнорировать любые другие дочерние элементы, такие как 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 узла нуждается в div-обертке сclass = "table", но игнорируйте 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-оболочки?Спасибо.

Ответы [ 2 ]

0 голосов
/ 15 декабря 2018

Вам лучше использовать цикл for / (с помощью map здесь используется анти-шаблон) для перебора дочерних узлов родительского узла и замены текущего дочернего узла новым созданным элементом.

Проверьте вывод в dev tools, чтобы увидеть изменения. 

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>
0 голосов
/ 15 декабря 2018

Мне кажется, я понял, что ты пытаешься сделать.Это должно найти дочерние узлы без класса «table» и обернуть их в div с классом «table».Когда вы запускаете фрагмент, он ничего не показывает, так как ваши элементы не имеют контента, но вы должны быть в состоянии проверить их, чтобы увидеть изменения. 

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