partie Sélectionnez du texte dans une balise

Question

La structure DOM ressemble à ceci (site web existant ... cant modifier):

<table> 
<tr><td> 
<br><hr size="1"><strong>some heading 1</strong><br> 
<br>some text 1<br> 

<br><hr size="1"><strong>some heading 2</strong><br> 
<br>some text 2<br> 
</td></tr> 
</table> 

Je veux le manipuler pour qu'il ressemble à ce

<table> 
<tr><td> 
<br><hr size="1"><strong>some heading 1</strong><br> 
<br>some text 1<br> 
</td></tr> 
<tr><td> 
<br><hr size="1"><strong>some heading 2</strong><br> 
<br>some text 2<br> 
</td></tr> 
</table> 

En utilisant la solution publiée here, je suis en mesure d'obtenir les balises hr, strong, br et de les déplacer dans de nouveaux éléments td. Cependant, je ne suis pas en mesure de me procurer "du texte 1" car il est directement contenu dans le td et l'utilisation de .text() sur td me donnera à la fois "du texte 1" et "du texte 2".

Une idée?

Answer 1

Vous pouvez utiliser .contents() pour collecter tous les enfants, y compris les nœuds de texte. Le code suivant recherche la deuxième heure (pour être robuste) et déplace le br précédent et tout ce qui est derrière le td nouvellement créé. Je l'ai testé dans Google Chrome.

$('table tr td').each(function() { 
    var firtHrSeen = false; 
    var indexOfSecondHr = -1; 
    var allChildren = $(this).contents(); 
    allChildren.each(function(index) { 
     if ($(this).is('hr')) { 
      if (firtHrSeen) { 
       indexOfSecondHr = index; 
       return false; // break out of each() 
      } else { 
       firtHrSeen = true; 
      } 
     } 
    }); 

    if (indexOfSecondHr != -1) { 
     var newTd = ($('<tr><td></td></tr>').insertAfter(this.parentNode))[0].firstChild; 
     allChildren.slice(indexOfSecondHr - 1).each(function(index) { 
      newTd.appendChild(this); 
     }); 
    } else { 
     // not found. something went wrong 
    } 
}); 

Answer 2

Peut-être essayer cela, ce n'est pas assez, mais il devrait fonctionner ...

html = $("table tr td").html(); 
someText1 = html.split("<br>")[3]; 
someText2 = html.split("<br>")[7]; 

Cela vous donnera le texte que vous étiez incapable d'analyser et vous semblez avoir le reste compris.

Answer 3

Oui, jQuery n'aide pas beaucoup avec les nœuds de texte. Vous devez souvent utiliser des méthodes DOM normales. Quelque chose comme:

// Split on each `<hr>` inside a table cell except the first 
// 
$(mytablecell).children('hr').slice(1).each(function() { 
    // Create the next row 
    // 
    var rowi= mytablecell.parentNode.rowIndex; 
    var newrow= $(mytablecell).closest('table')[0].insertRow(rowi+1); 
    var newcell= newrow.insertCell(0); 

    // Move all nodes starting with the current `<hr>` into the next row 
    // 
    var node, next= this; 
    while (node= next) { 
     var next= node.nextSibling; 
     newcell.appendChild(node); 
    } 
});