Merge direkte HTML-Geschwister in eine in jQuery

Question

Ich muss direkte HTML-Geschwister in nur einer in Seitencode einschließlich Textknoten zusammenführen.

<div>some text 
<b>some text</b> som 
e text <b>text</b><b> more text</b> some te 
xt</div> 

Dies ist actualy Ausgabe nach dem Code rangy und jQuery Bearbeitung und ich brauche es nach der Bearbeitung zu löschen, so dass es wie folgt aussehen:

<div>some text <b>some text</b> some text <b>text more text</b> some text</div> 

Ich möchte jQuery verwenden zu tun Dies. Ich bin mir der Funktionen unwrap() und wrapAll() bewusst, aber ich kann sie nicht effektiv kombinieren. Danke für jeden Hinweis oder Hilfe!

Answer 1

Sie benötigen Kind eins nach dem anderen iterieren Knoten; Knoten mit vorherigem vergleichen und ggf. kombinieren. Es kann so kompliziert sein wie du willst; aber hier ist ein Anfang:

$("div").each(function (i) { 
    $(this).find("*").each(function() { 
     var that = this.previousSibling; 
     if (that && that.nodeType === Node.ELEMENT_NODE && that.tagName === this.tagName) { 
      var node = document.createElement(this.tagName); 
      while (that.firstChild) { 
       node.appendChild(that.firstChild); 
      } 
      while (this.firstChild) { 
       node.appendChild(this.firstChild); 
      } 
      this.parentNode.insertBefore(node, this.nextSibling); 
      that.parentNode.removeChild(that); 
      this.parentNode.removeChild(this); 
     } 
    }); 
}); 

Demo here

Answer 2

Wenn ich Ihre Frage richtig verstanden habe, wollten Sie Elemente kombinieren, die nebeneinander vom selben Typ sind.

var $div = $("#mydiv"); 
console.log($div.html()); 

$div.contents().each(function(){ 
    if (this.nodeType != 1) return; 
    while (this.nextSibling && this.nextSibling.tagName == this.tagName) { 
     this.innerHTML = (this.innerHTML + this.nextSibling.innerHTML); 
     this.parentNode.removeChild(this.nextSibling); 
    } 
}); 

console.log($div.html()); 

http://jsfiddle.net/X8LYu/2/

Wenn Sie wollten auch die new-line Zeichen entfernen, es würde sich das ändern:

var $div = $("div"); 
console.log($div.html()); 

$div.contents().each(function(){ 
    if (this.nodeType == 3) { 
     this.nodeValue = this.nodeValue.replace(/\n/g,""); 
     return; 
    } 
    if (this.nodeType != 1) return; 
    while (this.nextSibling && this.nextSibling.tagName == this.tagName) { 
     this.innerHTML = (this.innerHTML + this.nextSibling.innerHTML).replace(/\n/g,""); 
     this.parentNode.removeChild(this.nextSibling); 
    } 
}); 

console.log($div.html()); 

http://jsfiddle.net/X8LYu/3/

ich nicht schreiben Code in das sehr oft, also könnte es bessere Wege geben, damit umzugehen.

Answer 3

$('div').html(function(_, oldHTML) { 
    return oldHTML.replace(/\n/g, ''); 
}).children().filter(function() { 
    return this.nextSibling 
      && this.nextSibling.nodeName === this.nodeName; 
}).text(function (_, oldText) { 
    return oldText + this.parentNode.removeChild(this.nextSibling).textContent; 
}); 

http://jsfiddle.net/tVZJV/