CODEWITHSUNDEEP
jquerycss-selectors
Omiod
Omiod

Reputation: 11623

Selector based on text between tags, in Jquery

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>[email protected]</p>

or this:

<h2>name</h2>
<p>john</p>
<h3>email</h3>
<p>[email protected]</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.

Upvotes: 2

Views: 3662

Answers (4)

user113716
user113716

Reputation: 322502

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

Upvotes: 6

Thomas
Thomas

Reputation: 2162

To get the email, for example, you could do this:

var emailAddress = $('h3:contains(email)').next('p').text();

Upvotes: 3

Nick Craver
Nick Craver

Reputation: 630449

Use :contains()...or an exact match with .filter() then do .next() to get the <p> sibling that follows, like this:

$("h3:contains('email')").next().doSomething();

Or with .filter() for an exact match (where :contains() is a substring match), like this:

$("h3").filter(function() { return $.text([this]) == "email"; }).next()

You can test both here.

Upvotes: 6

dev-null-dweller
dev-null-dweller

Reputation: 29462

var yourP = $('h3:contains("email")').next()

Upvotes: 2

Related Questions