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 sometim开发者_开发技巧es 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>jong@site.com</p>
or this:
<h2>name</h2>
<p>john</p>
<h3>email</h3>
<p>jong@site.com</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.
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()
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.
To get the email, for example, you could do this:
var emailAddress = $('h3:contains(email)').next('p').text();
var yourP = $('h3:contains("email")').next()
精彩评论