• Major Sections
  • Home
  • Toolkit
  • Framework
  • Application
  • Installation and Repos
• Personal tools
  • Log in
• • Main page
  • Recent changes
  • Random page
  • Help
• Toolbox
  • What links here
  • Related changes
  • Special pages

Toolkit:sb.nodeList

From Surebert wiki

Overview

sb.nodeList instances are returned from the $ selections. A sb.nodeList instance has a property .nodes which is an array of all the nodes it holds. It also has a bunch of other properties and methods that make working with these nodes easier. For example, a sb.nodeList instance has many of the array prototypes that allow you to manipulate the array without having to directly reference the .nodes property. Any prototypes that you create for sb.nodeList will be applied to all other sb.nodeList instances.

Properties

.nodes

This is an array of the nodes that the sb.nodeList references. Every node added to an sb.nodeList's .nodes array has an unique id

Methods

.add(nodes)

.drop()

.firePerNode(func, arg1, arg2)

Fires a func once per each node in the .nodes array. Any arguments after the func argument are passed as arguments to the function. The "this" of the function is the node being it is being applied to.

var nodes = $('ol li');
//hide all the nodes from view
nodes.firePerNode(Element.prototype.hide);
 
//inline function - alert the innerHTML of each
nodes.firePerNode(function(){alert(this.innerHTML);});
 
//assuming you has a function that changed background color, this would pass the argument 'blue' as the first argument to that function
nodes.firePerNode(changeBackgroundColor, 'blue');

.styles(styles)

Applies a styles object argument to each node in the .nodes array

var nodeList = $('li,p');
nodeList.styles({
	backgroundColor : 'red',
	color: 'yellow',
	fontSize : '1.2em'
});

Methods from Array.prototype

.forEach(func)

Same as the array prototype of the same name. Uses native .forEach where avaiable and emulated where it does not exist (IE6, IE7). Pass a function to it, the function is called once for each node, and is passed the current node, the key (index), and the whole nodes array, allowing for forward and backward lookups.

In this example, each list item in the sb.nodeList has its background color changed to red.

var myNL = $('li');
myNL.forEach(function(v,k,a){
	v.style.backgroundColor = 'red';
});

.map()

Same as the array prototype of the same name. Uses native .map where avaiable and emulated where it does not exist (IE6, IE7). Pass a function to it, the function is called once for each node, and is passed the current node, the key (index), and the whole nodes array, allowing for forward and backward lookups. The value returned is what is put into the new array. Creates a new array with the results of calling a provided function on every element in this array.

In this example the array of anchor's becomes and array of the anchor's parent nodes.

var myNL = $('a');
var parents = myNL.map(function(v,k,a){
	if(v.parentNode && v.parentNode.nodeType ==1 ){
		return v.parentNode;
	}
});

.some()

Same as the array prototype of the same name. Uses native .some where available and emulated where it does not exist (IE6, IE7). Pass a function to it, the function is called once for each node, and is passed the current node, the key (index), and the whole nodes array, allowing for forward and backward lookups. You return a boolean from your function. If some of the calls to the function return true, then .some() itself returns true. In this case if it would return true if at least on of the list items had the className 'blue'.

var myNL = $('li');
var some = myNL.some(function(v,k,a){
	return v.parentNode.className == 'blue';
});

.every()

Same as the array prototype of the same name. Uses native .every where available and emulated where it does not exist (IE6, IE7). Pass a function to it, the function is called once for each node, and is passed the current node, the key (index), and the whole nodes array, allowing for forward and backward lookups. You return a boolean from your function. If every one of the calls to the function return true, then .every() itself returns true. In this case if it would return true if every list item in the sb.nodeList had the className 'blue'.

var myNL = $('li');
var some = myNL.some(function(v,k,a){
	return v.parentNode.className == 'blue';
});

.filter()

Same as the array prototype of the same name. Uses native .every where available and emulated where it does not exist (IE6, IE7). Pass a function to it, the function is called once for each node, and is passed the current node, the key (index), and the whole nodes array, allowing for forward and backward lookups. You return a boolean from your function. If you return false, the array value is not passed to the new array, if you return true it is. In this example, you are removing all nodes from the nodeList that do not have the classname "blue".

var myNL = $('li');
myNl.nodes = myNL.filter(function(v,k,a){
	return v.parentNode.className == 'blue';
});

.map()

Same as the array prototype of the same name. Uses native .every where available and emulated where it does not exist (IE6, IE7). Pass a function to it, the function is called once for each node, and is passed the current node, the key (index), and the whole nodes array, allowing for forward and backward lookups. You return a boolean from your function. The values returned from the function become the values in the newArray returned. In this example, a new array named myArray is created that contains the innerHTML of each node in the nodeList.

var myNL = $('li');
var myArray = myNL.map(function(v,k,a){
	return v.innerHTML;
});