Question

I need to retrieve data from the DOM, but the containers have no a specific class or id,
and sometimes they are not all available.

So I could find this:

<h2>name</h2>
<p>john</p>
<h2>address</h2>
<p>street 1</p>
<h3>email</h3>
<p>[e-mail]</p>

or this:

<h2>name</h2>
<p>john</p>
<h3>email</h3>
<p>[e-mail]</p>

As you can see, to fetch the email I can’t select by class or id, nor by n(th) element, because it could be the 2nd or 3th <p>

The only solution I see is to get the first <p> just after <h3>email</h3>, but I have no idea how to filter by text() data.

Thank you.

Answer 1

You can always create your own selector that matches on exact text content.

This one does that, but trims any whitespace first.

$.extend($.expr[':'], {
    textIs: function(elem, i, attr) {
        return ( $.trim( $.text([elem]) ) === attr[3] );
    }
});

Then you would use it like this:

Example: http://jsfiddle.net/aXvm3/

$('h3:textIs(email)').next()