Question

我正在使用带有'hidden'类的div元素替换带有'custom'类的元素，使用下面的代码。

我需要它为节点列表中的每个节点运行脚本的多次迭代。我无法更改“自定义”元素，因此我无法为其分配ID。我意识到我可以简单地制作这个脚本的多个副本，但我正在寻找一个更清洁的解决方案。

我已经做了一些研究可能的解决方案，我认为阵列会起作用吗？我从未在任何项目中使用它们。但是，如果没有别的办法，我想我会选择多副本解决方案。

<script> 
 function replaceTargetWith( targetClasses, html ){
   var targetClass = document.getElementsByClassName(targetClasses);
   var i, div, elm, last, target = targetClass[0];
   div = document.createElement('div');
   div.innerHTML = html;
   i = div.childNodes.length;
   last = target;
   while(i--){
     target.parentNode.insertBefore((elm = div.childNodes[i]), last);
     last = elm;
   }
   target.parentNode.removeChild(target);
}
window.onload = function(){
  replaceTargetWith('custom','<div class="hidden"></div>');  
}
</script>

Answer 1

您必须重复targetClasses而不是仅使用targetClasses[0]。

function replaceTargetWith( targetClasses, html ){
  var parser = document.createElement('div');
  parser.innerHTML = html;
  var targets = document.getElementsByClassName(targetClasses);
  [].slice.call(targets).forEach(function(target) {
    var parentTarget = target.parentNode;
    [].forEach.call(parser.childNodes, function(child) {
      parentTarget.insertBefore(child.cloneNode(true), target);
    });
    parentTarget.removeChild(target);
  });
}

function replaceTargetWith( targetClasses, html ){
  var parser = document.createElement('div');
  parser.innerHTML = html;
  var targets = document.getElementsByClassName(targetClasses);
  [].slice.call(targets).forEach(function(target) {
    var parentTarget = target.parentNode;
    [].forEach.call(parser.childNodes, function(child) {
      parentTarget.insertBefore(child.cloneNode(true), target);
    });
    parentTarget.removeChild(target);
  });
}
replaceTargetWith('custom', '<div class="hidden">Hidden</div>');

.hidden {
  opacity: 0.5;
}

<div class="custom">Custom</div>
<div class="custom">Custom</div>
<div class="custom">Custom</div>
<div class="custom">Custom</div>

还要考虑insertAdjacentHTML：

function replaceTargetWith( targetClasses, html ){
  var targets = document.getElementsByClassName(targetClasses);
  [].slice.call(targets).forEach(function(target) {
    target.insertAdjacentHTML('afterend', html);
    target.parentNode.removeChild(target);
  });
}

function replaceTargetWith( targetClasses, html ){
  var targets = document.getElementsByClassName(targetClasses);
  [].slice.call(targets).forEach(function(target) {
    target.insertAdjacentHTML('afterend', html);
    target.parentNode.removeChild(target);
  });
}
replaceTargetWith('custom', '<div class="hidden">Hidden</div>');

.hidden {
  opacity: 0.5;
}

<div class="custom">Custom</div>
<div class="custom">Custom</div>
<div class="custom">Custom</div>
<div class="custom">Custom</div>

涉及NodeList的脚本的多次迭代

1 个答案: