YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Using filter




    
Using filter

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}






#selector-demo ul {
    float:left;
}
#selector-demo ol {
    clear:both;
}




Using filter



  

Clicking the button will alert the number of items with the class of "selected" applied.


      



    

            lorem
            
  • ipsum

    •         
  • dolor

    •         
  • sit

    •     

    

            
  • lorem

    •         ipsum
            
  • dolor

    •         
  • sit

    •     

    

            
  • lorem

    •         
  • ipsum

    •         
  • dolor

    •         sit
        

    

            
  1. lorem

    2.         
  2. ipsum

    3.         
  3. dolor

    4.         sit
        

    run


(function() {
    var nodes = document.getElementById('selector-demo').getElementsByTagName('li');
    var handleClick = function(e) {
        nodes = YAHOO.util.Selector.filter(nodes, '.selected');
        alert(nodes.length); 
    };
    YAHOO.util.Event.on('demo-run', 'click', handleClick);
    YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();





   
  
yui_2.7.0b.zip( 4,431 k)