Форум

ekad · #1 (**permalink**) 10.06.2017, 13:23

Есть например 4 дива:

<div>ссылка1</div>
<div>ссылка2</div>
<div>ссылка3</div>
<div>Поднимающийся див</div>

нужно при нажатии на ссылку 4-ый див поднимался до нажатой ссылки

например если нажать на ссылку1 будет так:

<div>ссылка1</div>
<div>Поднимающийся блок</div>
<div>ссылка2</div>
<div>ссылка3</div>

laimas · #2 (**permalink**) 10.06.2017, 13:36

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>

</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> 
$(function() {
    $('div.link').click(function() {
        $('#box').insertAfter(this)
    })
});
</script> 
</head>
<body>
<div class="link">ссылка1</div>
<div class="link">ссылка2</div>
<div class="link">ссылка3</div>
<div id="box">Поднимающийся див</div>
</body>
</html>

j0hnik · #3 (**permalink**) 10.06.2017, 13:48

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<div class="link">ссылка1</div>
	<div class="link">ссылка2</div>
	<div class="link">ссылка3</div>
	<div class="block">Поднимающийся див</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
		$(".link").click(function(){
			$(".block").appendTo($(this));
		});
	</script>
</body>
</html>

laimas · #4 (**permalink**) 10.06.2017, 13:50

j0hnik,
есть принципиальные отличия в данном случае?

j0hnik · #5 (**permalink**) 10.06.2017, 13:53

Сообщение от laimas

j0hnik,
есть принципиальные отличия в данном случае?

нет, я просто пока печатал, твой пост появился. ты меня опередил

laimas · #6 (**permalink**) 10.06.2017, 13:58

Сообщение от j0hnik

ты меня опередил

Ну тогда в вашем коде и $(".block") - получить, а потом еще и $(this) - получить, хотя ведь достаточно просто DOM. )

j0hnik · #7 (**permalink**) 10.06.2017, 14:11

Сообщение от laimas

Ну тогда в вашем коде и $(".block") - получить, а потом еще и $(this) - получить, хотя ведь достаточно просто DOM. )

несмотря на это мой метод быстрей на 5-9 %

https://jsperf.com/appendto-insertafter

laimas · #8 (**permalink**) 10.06.2017, 14:16

Сообщение от j0hnik

несмотря на это мой метод быстрей на 5-9 %

Это ваш код, а не метод. ) Сделайте еще быстрее - оперируется одним блоком, а значит выгоднее получать его получать через ID. )

PS. И не $('.link'), а $('div.link'), тоже для скорости.

j0hnik · #9 (**permalink**) 10.06.2017, 14:21

Сообщение от laimas

Это ваш код, а не метод. ) Сделайте еще быстрее - оперируется одним блоком, а значит выгоднее получать его получать через ID. )

насчет ид согласен, еще пару % даст

laimas · #10 (**permalink**) 10.06.2017, 14:22

Сообщение от j0hnik

еще пару % даст

И $('div.link') тоже.

Форум

Справочник

Discord чат

Курсы javascript