Необходимо удалить выбранные элементы, но оставить для дальнейшего использования информацию, связанную с этими элементами.

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

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

Решение

Задачу будем решать с помощью метода detach([selector]) (листинг 6.3.5).

Листинг 6.3 .5 . Использование метода detach()

<!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-6-3-5</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>
<style type="text/css"> p, div {
width:250px; height:25px; border:1px dotted #369;
padding-left:5px; margin:1px; color:#369;
}
.off { background-color:#369; }
</style>
<script type="text/javascript">
$(function(){
$("p").click(function(){
$(this).toggleClass("off");
});
var p;
$("button").click(function() { if(p) {
p.insertAfter("div:first"); p = null;
} else {
p = $("p").detach();
}
});
});
</script>
</head>
<body>
Первый <strong>div</strong>
<p>Первый параграф</p>
<p id="two">Второй <em>параграф</em></p>
<p><a href="#">Третий</a> параграф</p>
Второй <strong>div</strong>
<button>Удалить/вставить параграф</button>
</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-6-3-5</title>

width:250px; height:25px; border:1px dotted #369;

padding-left:5px; margin:1px; color:#369;

}

.off { background-color:#369; }

</style>

$(function(){

$("p").click(function(){

$(this).toggleClass("off");

});

var p;

$("button").click(function() { if(p) {

p.insertAfter("div:first"); p = null;

} else {

p = $("p").detach();

}

});

</script>

</head>

<body>

Первый <strong>div</strong>

<p>Первый параграф</p>

<p id="two">Второй <em>параграф</em></p>

<p><a href="#">Третий</a> параграф</p>

Второй <strong>div</strong>

<button>Удалить/вставить параграф</button>

</body>

</html>

Обсуждение

HTML-разметка, приведенная в листинге 6.3.5, — это несколько элементов p и div. Нас будут интересовать элементы p, которые содержат некоторый текст, а также дочерние элементы.

Если рассматривать JavaScript-код, то с элементами p мы связываем обработчик события click, в котором с помощью метода toggleClass() переключаем стилевое оформление элементов.

Затем объявляем переменную p, которая будет использоваться в обработчике нажатия кнопки Удалить/вставить параграф.

В зависимости от состояния переменной p, мы либо вставляем ее содержимое после первого элемента div в HTML-разметке, либо записываем результат выполнения метода detach(), примененного к набору элементов p, созданного с помощью соответствующего селектора.

Если теперь щелкать мышью на параграфах, то при каждом следующем щелчке будет изменяться их фон. Если же нажать на кнопку Удалить/вставить параграф, то параграфы будут удалены.

Самое интересное, что если нажать на ту же кнопку во второй раз, то исходное состояние всех параграфов будет восстановлено, т. е. параграфы будут содержать точно такой же текст и внутреннюю разметку, а также реагировать на событие click, связанное с ними.

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

Популярное

Категории

Необходимо удалить выбранные элементы, но оставить для дальнейшего использования информацию, связанную с этими элементами.

Решение

Обсуждение

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

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