Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Поднятие div блока по клику, к месту клика (https://javascript.ru/forum/jquery/69272-podnyatie-div-bloka-po-kliku-k-mestu-klika.html)

ekad 10.06.2017 13:23
Поднятие div блока по клику, к месту клика
 
Есть например 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 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 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 10.06.2017 13:50
j0hnik,
есть принципиальные отличия в данном случае?

j0hnik 10.06.2017 13:53
Цитата:
Сообщение от laimas (Сообщение 455127)
j0hnik,
есть принципиальные отличия в данном случае?
нет, я просто пока печатал, твой пост появился. ты меня опередил

laimas 10.06.2017 13:58
Цитата:
Сообщение от j0hnik
ты меня опередил
Ну тогда в вашем коде и $(".block") - получить, а потом еще и $(this) - получить, хотя ведь достаточно просто DOM. )

j0hnik 10.06.2017 14:11
Цитата:
Сообщение от laimas (Сообщение 455130)
Ну тогда в вашем коде и $(".block") - получить, а потом еще и $(this) - получить, хотя ведь достаточно просто DOM. )
несмотря на это мой метод быстрей на 5-9 %

https://jsperf.com/appendto-insertafter

laimas 10.06.2017 14:16
Цитата:
Сообщение от j0hnik
несмотря на это мой метод быстрей на 5-9 %
Это ваш код, а не метод. ) Сделайте еще быстрее - оперируется одним блоком, а значит выгоднее получать его получать через ID. )

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

j0hnik 10.06.2017 14:21
Цитата:
Сообщение от laimas (Сообщение 455137)
Это ваш код, а не метод. ) Сделайте еще быстрее - оперируется одним блоком, а значит выгоднее получать его получать через ID. )
насчет ид согласен, еще пару % даст

laimas 10.06.2017 14:22
Цитата:
Сообщение от j0hnik
еще пару % даст
И $('div.link') тоже.

ekad 10.06.2017 14:32
Всем огромное спасибо!

j0hnik 10.06.2017 15:10
Цитата:
Сообщение от laimas (Сообщение 455140)
И $('div.link') тоже.
Если уж на то пошло нафиг jquery

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<div class="link">ссылка1</div>
	<div class="link">ссылка2</div>
	<div class="link">ссылка3</div>
	<div id="block">Поднимающийся див</div>
	<script>
[].forEach.call(document.querySelectorAll(".link"), function(el) {
	el.onclick = function(){
	this.appendChild(document.getElementById("block"));
	};
});
	</script>
</body>
</html>


Vanilla .js рулит ;)

laimas 10.06.2017 15:21
Вы думаете, что document.querySelectorAll(".link") умнее jQuery? Эта библа и использует этот метод в первую очередь, если он доступен.

Дело не в методе, а поиске. Вы свой тест в тепличном режиме запускаете, а на странице элементов может быть в тысячу и более. А значит поиск по классу не конкретизируя чего, это перебор всех без исключения DOM элементов.


Часовой пояс GMT +3, время: 05:25.