Question

我正在编写一个脚本来将元素的内容复制到父元素，并删除该元素。元素和父元素具有相同的类。例如：

在脚本运行之前：

<span class='SomeClass'>  
    Some
    <span class='SomeClass'>
        Copied
    </span>
    Text
</span>

之后：

<span class='SomeClass'>  
    SomeCopiedText
</span>

以下是我的代码。内部元素的文本（＆＃34;复制＆＃34;）最终在行尾，而不是在＃34;某些＆＃34;之间。和＆＃34;文字＆＃34;。我该如何解决？

＆＃13;

if ($('.SomeClass > .SomeClass').length > 0) {
  $('.SomeClass > .SomeClass').each(function(index, event) {
    $(this).parent().append($(this).html());
    $(this).remove();
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="SomeClass">
  Some
  <span class="SomeClass">
    Copied
  </span>
  Text
</span>

＆＃13;

Answer 1

您可以使用contents()和unwrap()来删除开始和结束标记，而不是完整删除原始<span>。

使用此方法，$.each和if是不必要的。

＆＃13;

$('.SomeClass > .SomeClass').contents().unwrap();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="SomeClass">
  Some
  <span class="SomeClass">
    Copied
  </span>
  Text
</span>

<br><br>

<span class="SomeClass">
  Another
  <span class="SomeClass">
    Copied
  </span>
  Text
</span>

＆＃13;

Answer 2

请参阅.replaceWith（）方法http://api.jquery.com/replacewith/

if ($('.SomeClass > .SomeClass').length > 0) {
  $('.SomeClass > .SomeClass').replaceWith(function() {
    return $(this).text()
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="SomeClass">
  Some
  <span class="SomeClass">
    Copied
  </span>
  Text
</span>

Answer 3

尝试jQuery replaceWith

var a = $('.SomeClass > .SomeClass');

a.replaceWith(a.text());

replaceWith将使用提供的新内容替换匹配元素集中的每个元素，并返回已删除的元素集

EXAMPLE FIDDLE

Answer 4

所有这些答案都使用jQuery。这是一个只有原生JS的人。使用

parent.innerHTML = parent.innerHTML.replace(child.outerHTML, child.innerHTML);

这是一个功能完备的递归示例，用于过滤掉子项中的重复类。

/**
 * @function mergeHierarchy
 * @param {HTMLElement} parent - The root element to start merging under
 * @return {undefined}
 */
function mergeHierarchy(parent) {
  var parentClasses = parent.className.split(' ');
  parentClasses.sort(); // for comparing
  
  // only merge hierarchy if parent has any children
  if (parent.children.length == 0) return;
  
  // iterate over children
  for (var i=0; i<parent.children.length; i++) {
    var child = parent.children[i];
    // recurse if child has children
    if (child.children.length > 0) mergeHierarchy(child);
 
    var childClasses = child.className.split(' ');
    childClasses.sort();  // for comparing
    // if parent classes differ from child classes, then move onto the next child (after removing any duplicated classes)
    if (childClasses.length != parentClasses.length || !childClasses.every(function(item,i) { return item === parentClasses[i];} )) {
      // remove duplicate classes from child (if any)
      for (var c=0; c<childClasses.length; c++) {
        if (parentClasses.indexOf(childClasses[c]) > -1) childClasses.splice(c, 1);
      }
      child.className = childClasses.join(' ');
      continue;
    }
    // remove child from DOM and insert innerHTML into parentf
    parent.innerHTML = parent.innerHTML.replace(child.outerHTML, child.innerHTML);
  }
}

mergeHierarchy(document.querySelector('.SomeClass'));
console.log(document.querySelector('.SomeClass').innerHTML);

.SomeClass {
  color: red;
}
.SomeOtherClass {
  font-family: monospace;
}

<span class='SomeClass'>  
    Some
    <span class='SomeClass'>
        Copied
        <div class='SomeClass SomeOtherClass'>
          (Moved) 
        </div>
    </span>
    Text
</span>

请注意，由于字符串在JavaScript中是不可变的，因此重置innerHTML会将所有子元素替换为新元素，这可能会干扰DOM访问。

Answer 5

只需更改方法html（），它将返回HTML代码，使用text（），它基本上会返回类似于Vanilla中的element.innerText

＆＃13;

if ($('.SomeClass > .SomeClass').length > 0) {
  $('.SomeClass > .SomeClass').each(function(index, event) {
    //$(this).parent().append($(this).html());
    $(this).parent().append($(this).text());
    $(this).remove();
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="SomeClass">
  Some
  <span class="SomeClass">
    Copied
  </span>
  Text
</span>

＆＃13;

if ($('.SomeClass > .SomeClass').length > 0) {
  $('.SomeClass > .SomeClass').each(function(index, event) {
    $(this).parent().append($(this).text());
    $(this).remove();
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="SomeClass">
  Some
  <span class="SomeClass">
    Copied
  </span>
  Text
</span>

＆＃13;

删除元素并使用jQuery

5 个答案: