开发者

Selector based on text between tags, in Jquery

开发者 https://www.devze.com 2023-01-18 18:26 出处:网络
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.

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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号