1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.slice()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/traversing/" title="View all posts in Traversing">Traversing</a> > <a href="http://api.jquery.com/category/traversing/filtering/" title="View all posts in Filtering">Filtering</a></span>
</div>
</div>
<div id="slice1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.slice( start [, end] )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Reduce the set of matched elements to a subset specified by a range of indices.</p>
<ul class="signatures"><li class="signature" id="slice-start-end">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.1.4/">1.1.4</a></span>.slice( start [, end] )</h4>
<p class="arguement"><strong>start</strong>An integer indicating the 0-based position at which the elements begin to be selected. If negative, it indicates an offset from the end of the set.</p>
<p class="arguement"><strong>end</strong>An integer indicating the 0-based position at which the elements stop being selected. If negative, it indicates an offset from the end of the set. If omitted, the range continues until the end of the set.</p>
</li></ul>
<div class="longdesc">
<p>Given a jQuery object that represents a set of DOM elements, the <code>.slice()</code> method constructs a new jQuery object from a subset of the matching elements. The supplied <code>start</code> index identifies the position of one of the elements in the set; if <code>end</code> is omitted, all elements after this one will be included in the result.</p>
<p>Consider a page with a simple list on it:</p>
<pre>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</pre>
<p>We can apply this method to the set of list items:</p>
<pre>$('li').slice(2).css('background-color', 'red');</pre>
<p>The result of this call is a red background for items 3, 4, and 5. Note that the supplied index is zero-based, and refers to the position of elements within the jQuery object, not within the DOM tree.</p>
<p>The end parameter allows us to limit the selected range even further. For example:</p>
<pre>$('li').slice(2, 4).css('background-color', 'red');</pre>
<p>Now only items 3 and 4 are selected. The index is once again zero-based; the range extends up to but not including the specified index.</p>
<h4>Negative Indices</h4>
<p>The jQuery <code>.slice()</code> method is patterned after the JavaScript .slice() method for arrays. One of the features that it mimics is the ability for negative numbers to be passed as either the <code>start</code> or <code>end</code> parameter. If a negative number is provided, this indicates a position starting from the end of the set, rather than the beginning. For example:</p>
<pre>$('li').slice(-2, -1).css('background-color', 'red');</pre>
<p>This time only list item 4 is turned red, since it is the only item in the range between two from the end (<code>-2</code>) and one from the end (<code>-1</code>).</p>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Turns divs yellow based on a random slice.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
div { width:40px; height:40px; margin:10px; float:left;
border:2px solid blue; }
span { color:red; font-weight:bold; }
button { margin:5px; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</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></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo" rel="240"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">Selects all paragraphs, then slices the selection to include only the first element.</span>
</h4>
<pre class="prettyprint"><code class="example">$("p").slice(0, 1).wrapInner("<b></b>");</code></pre>
</div>
<div id="example-2">
<h4>Example: <span class="desc">Selects all paragraphs, then slices the selection to include only the first and second element.</span>
</h4>
<pre class="prettyprint"><code class="example">$("p").slice(0, 2).wrapInner("<b></b>");</code></pre>
</div>
<div id="example-3">
<h4>Example: <span class="desc">Selects all paragraphs, then slices the selection to include only the second element.</span>
</h4>
<pre class="prettyprint"><code class="example">$("p").slice(1, 2).wrapInner("<b></b>");</code></pre>
</div>
<div id="example-4">
<h4>Example: <span class="desc">Selects all paragraphs, then slices the selection to include only the second and third element.</span>
</h4>
<pre class="prettyprint"><code class="example">$("p").slice(1).wrapInner("<b></b>");</code></pre>
</div>
<div id="example-5">
<h4>Example: <span class="desc">Selects all paragraphs, then slices the selection to include only the third element.</span>
</h4>
<pre class="prettyprint"><code class="example">$("p").slice(-1).wrapInner("<b></b>");</code></pre>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
