Question

I have this little text

<div>
Hello world<br>
this is a good<br>
text!

<br><br>

Whatever I need help<br>
so please!<br>

<br><br>
<!--    I WANT TO SELECT THE ELEMENTS AFTER THIS LINE INCLUDING TEXTNODE -->
It will be very nice<br>
when it works!

<br><br>
It will be very nice<br>
when it works!
<br><br>
</div>

As you can see it look like diffrent sections.

I can find the middle by seraching for all double <br><br> tags in the markup and divde it with 2. I have created this little function:

var content = $("div").html().toString();
var middle = content.match(/<br[^>]*><br[^>]*>/g).length / 2;

My problem now is that I don’t know exactly how to select the elements, including the textnode that are after the double br tags.

Heres a fiddle with the markup and JS
http://jsfiddle.net/ATbKU/

If I just get a hint about how to complete it will be enough 😉

Answer 1

I came up with this solution that doesn’t involve slicing up the HTML:

var content    = $("div").contents(),
    dblBRCount = content.filter(function () {
        return this.tagName == "BR" && this.nextSibling.tagName == "BR";
    }).length,
    filterCount = 0,
    result = content.filter(function () {
        if (filterCount >= (dblBRCount / 2))
            return true;
        else if (this.tagName == "BR" && this.previousSibling.tagName == "BR")
            filterCount++;

        return false;                
    });​​​​

Instead, it iterates over all the child nodes of the element twice, once to get the number of double <br> elements and the other to filter out all the elements before the middle, keeping those after.

Working demo: http://jsfiddle.net/AndyE/ATbKU/1/