[Функция] slice(start,end)
Раздел "Traversing"
Функция осущуствляет выбор подмножества подобранных элементов.
Параметры
slice(start,end)
1.1.4
start: начало «среза» в виде целое числа указывает на начало подмножества элементов. Первый элемент находится на нулевой позиции. Значение может быть отрицательно при выборке с окончания элементов.
end: окончание «среза» в виде целого числа указывает на окончание подмножества (последний элемент не включается в подмножество). Если не определено, то завершается в окончании набора.
Описание
Функция исполняется подобно встроенному массиву с помощью метода «среза».
Примеры
Пример:
Создание случайного «среза» элементов div.
"jQuery"
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);
"HTML"
<button>Turn slice yellow</button> <span>Click the button!</span> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
"CSS"
div { width:40px; height:40px; margin:10px; float:left;
border:2px solid blue; }
span { color:red; font-weight:bold; }
button { margin:5px; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ 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> </head> <body class="iframe"> <button>Turn slice yellow</button> <span>Click the button!</span> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html> <style> div { width:40px; height:40px; margin:10px; float:left; border:2px solid blue; } span { color:red; font-weight:bold; } button { margin:5px; } </style>
Пример:
Выбор всех элементов div, затем сделать «срез», чтобы использовать только первый div элемент.
"HTML"
<div>test</div> <div>test</div> <div>test</div>
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").slice(0, 1).wrapInner("<b></b>"); }); </script> </head> <body class="iframe"> <div>test</div> <div>test</div> <div>test</div> </body> </html>
Пример:
Выбор всех элементов div, затем сделать «срез», чтобы использовать только элементы div с 1 по 2 .
"HTML"
<div>test</div> <div>test</div> <div>test</div>
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").slice(0, 2).wrapInner("<b></b>"); }); </script> </head> <body class="iframe"> <div>test</div> <div>test</div> <div>test</div> </body> </html>
Пример:
Выбор всех элементов div, затем сделать «срез», чтобы использовать только 2 div элемент.
"HTML"
<div>test</div> <div>test</div> <div>test</div>
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").slice(1, 2).wrapInner("<b></b>"); }); </script> </head> <body class="iframe"> <div>test</div> <div>test</div> <div>test</div> </body> </html>
Пример:
Выбор всех элементов div, затем сделать «срез», чтобы использовать только 2 и 3 div элементы.
"HTML"
<div>test</div> <div>test</div> <div>test</div>
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").slice(1).wrapInner("<b></b>"); }); </script> </head> <body class="iframe"> <div>test</div> <div>test</div> <div>test</div> </body> </html>
Пример:
Выбор всех элементов div, затем сделать «срез», чтобы использовать только 3 div элемент.
"HTML"
<div>test</div> <div>test</div> <div>test</div>
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").slice(-1).wrapInner("<b></b>"); }); </script> </head> <body class="iframe"> <div>test</div> <div>test</div> <div>test</div> </body> </html>
Версия jQuery 1.4.2
Документ создан 2010-08-21