Форум

Shuryga · #1 (**permalink**) 28.09.2018, 15:43

Добрый день допустим есть такая верстка

<div class='one'>
	<div class='two'>
		<div class='click'>
			С него переходим
		</div>
	</div>
</div>



<div class='one'>
	<div class='two'>
		<div class='three'>
			<div class='click'>
				На него переходим
			</div>
		</div>
	</div>
</div>

<div class='one'>
	<div class='click'>
		На него переходим
	</div>
</div>

При переведение курсора с одного элемента с классом 'click' на другой мне нужно получить индексы элемента с классом 'one'. Индекс с которого перешли и индекс на который перешли

проблема заключаеться в том, что я не могу найти нужного оператора поиска родителя. Т.к. структура блоков разная. Естествено parent() Тут не подходит. Ну или я не могу понять как правильно им воспользоваться.

пример js кода (Неправильный пример=DDD)

$('.click').mouseleave(function(e){
		alert($( e.relatedTarget ).parent().index());
		alert($(this).parent().index());
	});

Заранее большое спасибо.

рони · #2 (**permalink**) 28.09.2018, 15:57

Shuryga,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var one = $(".one"), old = "null";
one.on("mouseenter", ".click, .click-on", function(event) {
  var index = one.index(event.delegateTarget);
  $("p").html("from " + old + " to " + index);
  old =  index;
})

});
  </script>
</head>

<body>
<p>index</p>
<div class='one'>
	<div class='two'>
		<div class='click'>
			С него переходим
		</div>
	</div>
</div>



<div class='one'>
	<div class='two'>
		<div class='three'>
			<div class='click-on'>
				На него переходим
			</div>
		</div>
	</div>
</div>

<div class='one'>
	<div class='click-on'>
		На него переходим
	</div>
</div>


</body>
</html>

Shuryga · #3 (**permalink**) 28.09.2018, 16:26

Большое спасибо за ответ.

Пытаюсь сделать так:

$('.click').mouseleave(function(e){
     alert($('.one').index(e.delegateTarget));
});

Но получаю "-1"

delegateTarget работает только с делегированием?

Shuryga · #4 (**permalink**) 28.09.2018, 16:29

Все Вижу что только с делегированием.

Shuryga · #5 (**permalink**) 28.09.2018, 16:39

Есть один ньюанс. Событие должно происходить когда мышка покидает блок (К сожалению это обязательно)

Пробую так

$('.one').on("mouseleave", ".click", function(event) {
		alert($('.one').index(event.delegateTarget));
		alert($('.one').index(event.currentTarget));
	});

С какого ухожу я получаю индекс. А на который перехожу не получаю(

рони · #6 (**permalink**) 28.09.2018, 17:10

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

Событие должно происходить когда мышка покидает блок

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

А на который перехожу не получаю(

не знаю телепатии за jquery, не могу предложить решения.

Shuryga · #7 (**permalink**) 28.09.2018, 17:23

Нашел решение всем большое спасибо )))))))))))))))))))

$('.click').mouseleave(function(e){
    alert($(this).closest('.one').index('.one'));
    alert($( e.relatedTarget ).closest('.one').index('.one'));
});

Форум

Справочник

Discord чат

Курсы javascript