Как сделать выполнение функции для каждого пункта в отдельности?

Question

[Thores]

<ul id="menu-p" class="menu-p">
	<li class="menu-p-item open">
		<a title="Каталог услуг" href="#" data-toggle="dropdown" class="menu-p-link dropdown-toggle" aria-haspopup="true" aria-expanded="true">Каталог услуг <i class="fa fa-caret-down" aria-hidden="true"></i></a>
		<div class="submenu-p-services submenu-p-closed submenu-p-collapsed dropdown-menu">
			<ul role="menu" class="submenu-p-list">
				<li class="submenu-p-item">
					<a title="ТЕКСТ" class="submenu-p-link menu-txt">ТЕКСТ</a>
					<div class="submenu-p-groups sub-menu-txt smpg_closed" id="sub-menu-txt">
						<ul role="menu" class="submenu-p-groups-layout">
							<li class="submenu-p-groups-layout-column">
								<ul class="submenu-p-group-wrapper">
									<strong class="submenu-group-title">ТЕКСТ</strong>
									<a title="ТЕКСТ" class="submenu-p-group-link">ТЕКСТ</a>
									<a title="ТЕКСТ" class="submenu-p-group-link">ТЕКСТ</a>
									<a title="ТЕКСТ" class="submenu-p-group-link">ТЕКСТ</a>
									<a title="ТЕКСТ" class="submenu-p-group-link">ТЕКСТ</a>
									<a title="ТЕКСТ" class="submenu-p-group-link">ТЕКСТ</a>
								</ul>
							</li>
							<li class="submenu-p-groups-layout-column">
								<ul class="submenu-p-group-wrapper">
									<strong class="submenu-group-title">ТЕКСТ</strong>
									<a title="ТЕКСТ" class="submenu-p-group-link">ТЕКСТ</a>
									<a title="ТЕКСТ" class="submenu-p-group-link">ТЕКСТ</a>
									<a title="ТЕКСТ" class="submenu-p-group-link">ТЕКСТ</a>
									<a title="ТЕКСТ" class="submenu-p-group-link">ТЕКСТ</a>
									<a title="ТЕКСТ" class="submenu-p-group-link">ТЕКСТ</a>
								</ul>
							</li>
						</ul>
					</div>
				</li>
				<li class="submenu-p-item">
					<a title="ТЕКСТ2" class="submenu-p-link menu-txt2">ТЕКСТ2</a>
					<div class="submenu-p-groups sub-menu-txt2 smpg_closed" id="sub-menu-txt2">
						<ul role="menu" class="submenu-p-groups-layout">
							<li class="submenu-p-groups-layout-column"></li>
							<li class="submenu-p-groups-layout-column"></li>
							<li class="submenu-p-groups-layout-column"></li>
						</ul>
					</div>
				</li>
и так далее...

скрипт выглядит примерно так я уже что только не перепробовал, уже запутался.. и прошу помощи если кто может помочь

$(function(){
	var subMenu;
	var id=$(".submenu-p-link [class='menu-']"),
		b=$(".submenu-p-link"),
		t=$(this),
		td=$(".submenu-p-"+t.data("submenu")),
		c=b.closest(".submenu-p-services"),
		d=$(".submenu-p-list",c),
		f=$(".submenu-p-groups",c)
		g=b.next(".submenu-p-groups"),
		h=d.height();

	
	b.each(function(){
		$(this).data('subMenu', $('#submenu .sub-' + $(this).attr('id')));
		
		b.mouseenter(function(){
		clearTimeout(subMenu);
		var sub = $(this).data('subMenu');
		b.addClass("submenu-p-link-current"),
		td.toggleClass('smpg_closed smpg_opened'),
		c.toggleClas('submenu-p-collapsed submenu-p-expanded'),
		e.hasClass("submenu-p-closed")||(g.height(i),c.height(h));
	});
		b.mouseleave(function(){
		b.removeClass("submenu-p-link-current"), //csubmenu-p-link_state_current
		f.toggleClass('smpg_opened smpg_closed'), //submenu-p-groups_state_closed
		c.toggleClas('submenu-p-expanded submenu-p-collapsed').css({height:"auto"});
	});
	});



});

В скрипте много чего лишнего тем не менее он работает, но работает сразу для всех <li class="submenu-p-item">.
Суть вообще в чем нужно что бы при наведении на или же на <a class="submenu-p-link">ССЫЛКА</a> менялись и добавлялись классы относительно именно этой ссылке на которую наведено, а так они меняются у всех пунктов подменю сразу и под подменю ) короче нужна фишка которая ограничит мой скрипт только на один элемент из списка помогите пожалуйста.

Answer 1

[Александр Золотых]

Суть такая: берем выборку элментов на которые наводим мышку, делаем так:

$('выборка').on('mouseenter', function(){
   var $targets = $element.parents('.submenu-p-item').find('элементы с которыми хотите что то делать');
   $targets.doSomething()
  })

Comments

[Thores]

Я так пробовал почему то скрипт вообще никак не отзывается на такое строение...

[Александр Золотых]

Thores: просто у вас действие ко всем элементам, а здесь принцип в том, что по наведению на элемент вы поднимаетесь в общий контейнер, в котором находятся элементы для каких то действий, находите их и применяете к ним действие. Но если например надо сбросить состояние таких элементов в других контейнерах, то надо сперва по общему селектору сбросить это состояние, и только после этого в контейнере искать узкую выборку.

[Thores]

Александр Золотых: Честно говоря я не мастер в этом деле, мне бы какой нибудь пример, понятно что нужно сбрасывать это многоуровневое меню, есть главное меню, потом идет подменю на котором все и завязано, к каждому пункту подменю прикручены еще несколько под-под- и под-под-под меню, и вся фишка должна быть в том что бы контейнер с привязанными под-под... отображался при наведении на пункт подменю...

Answer 2

[Thores]

Александр Золотых: Ну чтож банально ) код упрощен )

$(function(){
$(".submenu-p-item").on("mouseenter", ".submenu-p-link", function(){
     $(".submenu-p-groups").toggleClass('smpg_closed smpg_opened');
}).on("mouseleave", ".submenu-p-link", function(){
    $(".submenu-p-groups").toggleClass('smpg_opened smpg_closed');
});
});

НО, действует опять на все элементы, а без обертки
$(function(){ скрипт });
Вообще отказывается работать.

Comments

[Александр Золотых]

$(function(){
$(".submenu-p-item").on("mouseenter", ".submenu-p-link", function(){
$(this).parents(".submenu-p-item").find(".submenu-p-groups").addClass('smpg_opened').removeClass('smpg_closed');
}).on("mouseleave", ".submenu-p-link", function(){
$(".submenu-p-groups").removeClass('smpg_opened').addClass('smpg_closed');
});
});

[Александр Золотых]

действует на все элементы потому что у вас в mouseenter также как и в leave стоит выборка "всех" $(".submenu-p-groups"), а надо только в данном контейнере li, поэтому внутри mouseenter вы используете $(this) (это .submenu-p-link') и "поднимаетесь" выше до контейнера li .parents('li') и в нем ищете выборку groups - .find(".submenu-p-groups") и удаляете закрытый класс closed, и добавляете открытый opened.

При этом, если вдруг по какой то причине mouseleave сработает позже - то содержимое mouseenter можно обернуть в setTimeout:

…ion{
var that = this;
setTimeout(function(){
$(that).parents…
}, 100)
}

[Александр Золотых]

А вообще задачу похоже можно решить на css

[Thores]

Александр Золотых: Что ж я отметил ваш ответ как решением, но мне помог ваш комментарий выше, второй комментарий я так понимаю про задержку, но можно ли сделать что бы он например не исчезал вообще пока я мышку не переведу на другой пункт, или например выведу мышку вообще с этого меню, не переводя на другой пункт меню, и он так и остался что бы.?

[Александр Золотых]

да, событие надо вешать на сам li, тогда parents не надо, сразу find. Но все же рассмотрите возможность использования только csц

[Thores]

Александр Золотых: Да так я думал сделать, и делал, единственный недостаток я не могу добиться того эффекта что ожидал, а именно смены информации в оберточном диве, и фиксация самого дива, с запоминанием даже если закрыто подменю, одну проблему уже решили осталось решить еще несколько )