Wednesday, January 18th, 2006
Prototype adds CSS selector function: $$(‘div#page p.summary img’)
Category: Library, Prototype
, Tip
This time, Sam Stephenson has added some CSS selector magic to the Prototype trunk.
Example: Find all
elements inside
elements with class “summary�, all inside the
with id “page� and hide each matchedtag:
JAVASCRIPT:
-
-
$$('div#page p.summary img').each(Element.hide);
-
For fun, look at the function itself (obviously using all of the other nice prototype functions):
JAVASCRIPT:
-
-
function $$() {
-
return $A(arguments).map(function(expression) {
-
return expression.strip().split(/s+/).inject([null], function(results, expr) {
-
var selector = new Selector(expr);
-
return results.map(selector.findElements.bind(selector)).flatten();
-
});
-
}).flatten();
-
}
-
( via Thomas Fuchs )
Related Content:
- Cascading Style Sheet (CSS) Cheat Sheets
We've gathered resources from around the Web to help you with CSS. There's a fast reference that lists CSS selector syntax, properties, units and... - Server-side selector provides flexible DOM manipulation
jQuery made DOM manipulation on the client side much more concise thanks to its CSS Selector mechanism, among other things. Now, the CSS selector... - Cisco's load-balancing product line expands
Cisco Systems has introduced two content-switching devices, one for mirroring data across distributed data centers and the... - Set background color with CSS
4.1 rating from 89 votes
Nice! I have to change it to something else but $$ because my stupid template class things it’s a variable :(
I’ve been using behaviors.js to do this kind of javascript by css-selector for a while, it’s awesome. You can find it at http://bennolan.com/behaviour/
That code is extremely suspect (although, probably just a matter of coincidence) – jQuery, which was just announced this weekend at BarCampNYC, is visually very similar. However, the code produced by jQuery is much much more powerful. I highly recommend that you check it out.
Nice feature. Any benchmarks?
I would be surprised if it was anywhere near something that one could call “reasonable fast” with all the rather slow Enumerable abstraction going on.
Mind you, Enumerable is very elegant, but slow nonetheless.
I never get this kind of stuff… It looks cool, but what do you use it for?
Wouldn’t it be far more useful and understandable and faster and extensible and saner and less buggy to do the following instead:
CSS:
.hideimgs img { display:none; }
JS:
document.getElementById(“page”).className += ” hideimgs”;
Bingo! Same result.
My point: when and why do you need to select element using a CSS selector? If it’s for styling/hiding them use CSS. Someone has another reason? Please tell me.
Lon, it’s useful if you need to do JavaScript stuff with the resulting objects. Say, for sIFR it’s the way to select the elements you want to replace.
As another explanation, CSS selectors are an alternative to XPath (neither of which have convenient, built-in programmatic support across all major browsers, especially when it comes to HTML pages). Sometimes IDs are good enough, but not always.
Looking at the source, what’s nice here is that they compile the selectors to JavaScript, which means it runs at full JS speed. Maybe not fast, but should be much faster than an interpreter running inside JS (as Behaviour seems to do).
Benchmarks would be very interesting.
[...] From Ajaxian: Example: Find all elements inside elements with class “summaryâ€?, all inside the with id “pageâ€? and hide each matched tag: $$(‘div#page p.summary img’).each(Element.hide); [...]
Er, John, you’re getting a little overzealous there… nobody’s copying anyone else, we’re all just standing on each other’s shoulders.
@Bob Aman: Don’t feed the trolls. :)
Lon,
Often times you don’t want to set things to display:none in your CSS directly. If the device reading the page does not support javascript, the element that has no display will never be able to be seen. So, for example, you set all of the things you want hidden to display:none at window.onload, and users or agents that don’t parse javascript can still access the content.
Mike P.,
you can achieve what you are descibing much easier:
document.write(“”);
Put all CSS that is only allowed if script is present in scriptonly.css.
Or, maybe better, the other way around:
Let’s try that again:
Mike P.,
you can achieve what you are describing much easier:
document.write(â€?”);
Put all CSS that is only allowed if script is present in scriptonly.css.
Or, maybe better, the other way around:
you would want this in case you have some divs that you need to change on the fly, but you don’t know what the ‘id’s are because they are dynamically created. you just know where they are by their class name.
i hope! because otheriwse this isn’t going to work out too well for me!
[...] That’s good – but say you want to round and fade many elements on a page – and you don’t want to repeat the same code over and over. Another new addition to Prototype Selector magic comes to the rescue – here we are applying the round and fades to all divs with the roundAndFade class: $$(‘div.roundAndFade).each(Element.Round(’roundMeClass’).FadeTo(0.2, 500, 10)); [...]
[...] While working on the future AJAX interface of jamendo, I ran into some performance problems that were due to the extensive use of the new Prototype 1.5 function, $$. (Announcement of $$ on Ajaxian) [...]
[...] We hebben het de afgelopen tijd gehad over verschillende javascript libraries die CSS-style selectors aankonden, zoals jQuery en Behaviour. Maar ook de opkomende versie van Prototype: prototype 1.5.0, zal ook in staat zijn om DOM elementen te selecteren met CSS-style selectors. Hiervoor gebruik je dan de $$() functie: PLAIN TEXT JAVASCRIPT: [...]
미êµì—ì„œ ì´ë¯¸ 성공한 사업입니다.
êµë‚´ì—는 아는 분 ê±°ì˜ ì—†ìŠµë‹ˆë‹¤.
ë„ë©”ì¸ ê´€ë ¨ 사업입니다.
ì½ì–´ë³´ì‹œë©´ ì•„~ ì´ëž˜ì„œ ëˆì„ 버는구나 하실 ê²ë‹ˆë‹¤.
ì •ë³´ë„ ì •ë³´ë‚˜ë¦„ìž…ë‹ˆë‹¤.
ì˜ì–´ë²ˆì—ì˜ ë¬¸ì œë¥¼ 해결하였습니다.
완벽한 마케팅 ë„구를 ì œê³µí•©ë‹ˆë‹¤.
투ìžë¹„ìš©ìš”? ì›” 1만ì›ìž…니다.
ê¶ê¸ˆí•œ ë¶„ì€ maestrointernation@hotmail.com ë¡œ ë©”ì¼ì£¼ì„¸ìš”.
ìžë£Œë¥¼ ë©”ì¼ë¡œ ë³´ë‚´ë“œë¦¬ê² ìŠµë‹ˆë‹¤.
ì œê°€ ì§€ê¸ˆê» ì ‘í•œ ì •ë³´ 중 단연 ìµœê³ ë¼ê³ ìžì‹ 있게 ë§ì”€ë“œë¦½ë‹ˆë‹¤.
ìš´ì˜ìžë‹˜! ê²Œì‹œë¬¼ì´ ë§žì§€ 않으면 ì‚ì œë°”ëžë‹ˆë‹¤.
게시íŒì˜ urlì„ ì•Œë ¤ì£¼ì‹œë©´ 다시는 올리지 ì•Šê² ìŠµë‹ˆë‹¤.
사업 번창하세요. ì‚ì œëŠ” 1111입니다.
[...] Prototype adds CSS selector function: $$ October 15th, 2006 | Category: CSS selector [...]
i have no idea what that means?
strange
oh well
have a good christmas
keep it up and thanks for the info
ive learnt a lot
have a good new year
good luck in 2007
this is pretty fast considering the Enumerable abstraction is going on
We hebben het de afgelopen tijd gehad over verschillende javascript libraries die CSS-style selectors aankonden, zoals jQuery en Behaviour
I need to find a way to have Scriptaculus blind to work with sIFR!… Because the div’s are styled inline with display:none it won’t render the flash when the div blinds or slides or fades and any of the effects actually :)
Anyone got and cleaver ideas?
thanks for a great article
i agree this article is verry informative and well written
Nice! I have to change it to something else but $$ because my stupid template class things it’s a variable
css web template page (example) — http://www.css-lessons.ucoz.com/css-template-page.htm