Вход

Просмотр полной версии : Поднятие div блока по клику, к месту клика

ekad
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
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
j0hnik,
есть принципиальные отличия в данном случае?
нет, я просто пока печатал, твой пост появился. ты меня опередил
laimas
10.06.2017, 13:58
ты меня опередил

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

https://jsperf.com/appendto-insertafter
laimas
10.06.2017, 14:16
несмотря на это мой метод быстрей на 5-9 %

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

PS. И не $('.link'), а $('div.link'), тоже для скорости. ;)
j0hnik
10.06.2017, 14:21
Это ваш код, а не метод. ) Сделайте еще быстрее - оперируется одним блоком, а значит выгоднее получать его получать через ID. )
насчет ид согласен, еще пару % даст
laimas
10.06.2017, 14:22
еще пару % даст
И $('div.link') тоже.
ekad
10.06.2017, 14:32
Всем огромное спасибо!
j0hnik
10.06.2017, 15:10
И $('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 элементов.