Clicking the button will add a red border to all of the LI elements with the class of "selected" that live in a UL.
The query method, part of the YUI Selector Utility, makes it easy to retrieve an array of elements based on a CSS3 Selector.
To illustrate the use of query, we'll create a few HTML lists. When the button is clicked, we will add a red border to all LI
s that are descendants of UL
s, and have the class selected
applied.
Add some markup for the lists and a button to trigger the demo:
1 | <ul> |
2 | <li class="selected">lorem</li> |
3 | <li>ipsum</li> |
4 | <li>dolor</li> |
5 | <li>sit</li> |
6 | </ul> |
7 | <ul> |
8 | <li>lorem</li> |
9 | <li class="selected">ipsum</li> |
10 | <li>dolor</li> |
11 | <li>sit</li> |
12 | </ul> |
13 | <ul> |
14 | <li>lorem</li> |
15 | <li>ipsum</li> |
16 | <li>dolor</li> |
17 | <li class="selected">sit</li> |
18 | </ul> |
19 | |
20 | <ol> |
21 | <li>lorem</li> |
22 | <li>ipsum</li> |
23 | <li>dolor</li> |
24 | <li class="selected">sit</li> |
25 | </ol> |
26 | <button id="demo-run">run</button> |
view plain | print | ? |
Now we will define the function that adds the border when the button is clicked, and assign it as a click handler.
1 | <script type="text/javascript"> |
2 | var handleClick = function(e) { |
3 | var nodes = YAHOO.util.Selector.query('ul li.selected'); |
4 | YAHOO.util.Dom.setStyle(nodes, 'border', '1px solid red'); |
5 | }; |
6 | |
7 | YAHOO.util.Event.on('demo-run', 'click', handleClick); |
8 | </script> |
view plain | print | ? |
This is a simple example of how to use the Selector.query
method.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings