query slice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slice demo</title>
<style>
div {
width: 40px;
height: 40px;
margin: 10px;
float: left;
border: 2px solid blue;
}
span {
color: red;
font-weight: bold;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p><button>Turn slice yellow</button>
<span>Click the button!</span></p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
function colorEm() {
var $div = $( "div" );
var start = Math.floor( Math.random() * $div.length );
var end = Math.floor( Math.random() * ( $div.length - start ) ) +
start + 1;
if ( end === $div.length ) {
end = undefined;
}
$div.css( "background", "" );
if ( end ) {
$div.slice( start, end ).css( "background", "yellow" );
} else {
$div.slice( start ).css( "background", "yellow" );
}
$( "span" ).text( "$( 'div' ).slice( " + start +
(end ? ", " + end : "") +
").css( 'background', 'yellow' );" );
}
$( "button" ).click( colorEm );
</script>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: