<!DOCTYPE HTML>
<html>
<head>
<title>jQuery Custom Selector Execution Exploration</title>
<style type="text/css">
div {
border: 1px solid #CCCCCC ;
padding: 10px 10px 10px 10px ;
}
div.parent {
border-color: gold ;
}
</style>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
// This simply outputs the arguments passed to the
// selector for debugging purposes.
jQuery.expr[ ":" ].testSelector = function(
node,
index,
properties,
collection
){
// Output the custom selector arguments.
console.log( node, index, collection );
return( true );
};
// When the DOM is ready, initialize.
jQuery(function( $ ){
// Get all of the spans.
var spans = $( "span" );
// Get all the parent divs with the class "parent".
//
// NOTE: This selector is using a custom selector
// sandwiched bewteen two CLASS selectors.
var parents = spans.parents(
"div" +
".foo" +
":testSelector" +
".bar"
);
// Add a red, thick border.
parents.css( "border", "2px solid red" );
// Output the parents.
console.log( ".... parents ...." );
console.log( parents );
});
</script>
</head>
<body>
<h1>
jQuery Custom Selector Execution Exploration
</h1>
<div class="parent">
<div class="parent">
<div>
<span>Here is some inner text.</span>
</div>
</div>
</div>
</body>
</html>