Qatrix

$select

1. selector [string]

   The CSS selector for querying elements.

2. callback (optional) [function]

   The callback function for each matched elements.

Notes

This is a powerful selector for querying elements with native CSS selector powered and supported by browser engine. The syntax of selector string should be compatible with the web application you supported, especially for IE6/7 which supported simple CSS syntax only. But Qatrix is recommended that, using the good organized document element with id and className correctly provided for DOM querying is much more efficient than using powerful element selector.

Example

HTML code

<div class="box_wrap">
<div class="box">This is box 1</div>
<div class="box">This is box 2 <span>This is a span inside the box</span></div>
<span>This is a span</span>
</div>

<div class="box_wrap">
<div class="box">This is box 1</div>
<div class="box">This is box 2</div>
<div class="box"><div><span>This is a span inside the box inside box</span></div></div>
</div>

<button onclick="select_span()">select span</button>

CSS code

.box {
	width: 100px;
	height: 80px;
	margin: 10px 0;
	font-size: 12px;
	background: #5599bb;
	padding: 10px;
}

JavaScript code

function select_span()
{
	$select( ".box_wrap span", function (item)
	{
		$text( item, "I found this span!" );
		$style.set( item, "color", "red" );
	});
}

Demonstration