Необходимо уменьшить существующий набор до одного элемента.

Опубликовал: admin Tuesday, June 4, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Например, в наборе должен остаться только первый элемент, или последний, или вообще третий по счету.

Решение

В решении этой задачи нам помогут методы first(), last() и eq() (листинг 7.2.6).

Листинг 7 .2 .6 . Использование методов first(), last() и eq()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-2-6</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("li").first().css("background-color", "#f30");
$("li").last().css("background-color", "#093");
$("li").eq(2).css("background-color", "#ff3");
});
</script>
</head>
<body>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-7-2-6</title>

$(function(){

$("li").first().css("background-color", "#f30");

$("li").last().css("background-color", "#093");

$("li").eq(2).css("background-color", "#ff3");

});

</script>

</head>

<body>

<ul>

<li>Пункт 1</li>

<li>Пункт 2</li>

<li>Пункт 3</li>

<li>Пункт 4</li>

<li>Пункт 5</li>

</ul>

</body>

</html>

Обсуждение

Для своих опытов используем список из пяти пунктов. HTML-разметка в листинге 7.2.6 — проще не бывает. На JavaScript-код посмотрим внимательнее. Создадим набор из всех элементов li и применим к нему метод first(), оставив, таким образом, в наборе только один элемент — первый. С помощью метода css() установим для этого элемента зеленый цвет фона. Снова создадим такой же набор, но теперь применим к нему метод last(), который оставит в наборе только последний элемент. Методом css() устанавливаем зеленый цвет фона. В третий раз создаем тот же самый набор, но теперь применяем к нему метод eq(), которому передадим в качестве аргумента число 2, уменьшив набор до единственного элемента, третьего по счету (отсчет ведется от нуля), и ему установим фон желтого цвета.

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

Необходимо уменьшить существующий набор до одного элемента.

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply