开发者

CSS Selectors in Javascript with all H tags

Using Prototype JS library, I want to select all child link e开发者_运维技巧lements (A tags) regardless of whether their parent is: H1, H2, H3, H4, or H5 (etc) with a simple CSS Selector Rule (as opposed to further JS, like looping etc).

So the simple, but long way, to do this is:

$('page').select('h1 > a, h2 > a, h3 > a, h4 > a, h5 > a')

I guess I'm looking for a wild-card property, like h*, that doesn't exist.

Maybe the above example is the way to go, but I'm hoping there is a simpler, more concise and efficient way to do this.

Tips appreciated.


As per Fabien Ménager comment to the original question, it looks like there isn't a simple CSS Selector I can use other than what I have already.

$('page').select('h1 > a, h2 > a, h3 > a, h4 > a, h5 > a')

While there are other options if I want to be programmatic about it, or empty JQuery (which isn't an option for me) I am specifically looking for a CSS rule.

Thank you to everyone who tried to help.


Using jQuery:

$(":header a")


http://docs.jquery.com/Selectors/header says:

:header Matches all elements that are headers, like h1, h2, h3 and so on.

Adds a background and text color to all the headers on the page.

$(":header").css({ background:'#CCC', color:'blue' });


got an answer to this from the prototype devs. these are best and only solutions, for now at least:

$$('h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a')
$('page').select('h1 > a, h2 > a, h3 > a, h4 > a, h5 > a')

However, the next release of Prototype will let you choose a selector engine and will default to Sizzle. The :header pseudo-selector is actually part of Sizzle so will be available in future versions of prototype (as long as you choose sizzle as your selector engine). I guess it was not previously included as it is not part of any specification.

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜