Question

The DOM structure looks like this (existing website … cant modify it):

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

I want to manipulate it so that it looks like this

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

Using the solution posted here, I am able to get hold of the hr, strong, br tags and move them into new td elements. However, I am not able to get hold of “some text 1” since it is directly contained within the td and using .text() on td will give me both “some text 1” as well as “some text 2”.

Any idea?

Answer 1

You can use .contents() to collect all children including text nodes. The following code searches for the second hr (to be robust) and moves the preceding br and everything behind to the newly created td. I’ve tested it in 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
    }
});