Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.06.2017, 14:23
Интересующийся
Отправить личное сообщение для ekad Посмотреть профиль Найти все сообщения от ekad
 
Регистрация: 17.04.2013
Сообщений: 21

Поднятие 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>
Ответить с цитированием
  #2 (permalink)  
Старый 10.06.2017, 14:36
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,739

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 10.06.2017, 14:48
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 10.06.2017, 14:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,739

j0hnik,
есть принципиальные отличия в данном случае?
Ответить с цитированием
  #5 (permalink)  
Старый 10.06.2017, 14:53
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от laimas Посмотреть сообщение
j0hnik,
есть принципиальные отличия в данном случае?
нет, я просто пока печатал, твой пост появился. ты меня опередил
Ответить с цитированием
  #6 (permalink)  
Старый 10.06.2017, 14:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,739

Сообщение от j0hnik
ты меня опередил
Ну тогда в вашем коде и $(".block") - получить, а потом еще и $(this) - получить, хотя ведь достаточно просто DOM. )
Ответить с цитированием
  #7 (permalink)  
Старый 10.06.2017, 15:11
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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

https://jsperf.com/appendto-insertafter
Ответить с цитированием
  #8 (permalink)  
Старый 10.06.2017, 15:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,739

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

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

Последний раз редактировалось laimas, 10.06.2017 в 15:21.
Ответить с цитированием
  #9 (permalink)  
Старый 10.06.2017, 15:21
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от laimas Посмотреть сообщение
Это ваш код, а не метод. ) Сделайте еще быстрее - оперируется одним блоком, а значит выгоднее получать его получать через ID. )
насчет ид согласен, еще пару % даст
Ответить с цитированием
  #10 (permalink)  
Старый 10.06.2017, 15:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,739

Сообщение от j0hnik
еще пару % даст
И $('div.link') тоже.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Раскрытие не полностью раскрытого div по клику MrNix21 Элементы интерфейса 2 28.03.2016 15:41
Скрыть div блок по событию перемещение курсора или клика ivnjavascript Events/DOM/Window 9 17.08.2015 18:07
Как переписать div по клику по нему Lewik Общие вопросы Javascript 3 08.05.2012 22:27
Фиксация блока DIV при сворачивании другого блока DIV kacnepbI4 jQuery 2 04.04.2011 14:15
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21