Develop Reference

Bi-directional highlighting of elements with same class

I have 2 lists of items. One is an ordinary <ul> and the other is a grid of images wrapped in <div>s.
I am looking to highlight the item hovered on both lists that will work in both directions.
So if I hover over <li>Apple, both the <li>Apple & <div>Apple get highlighted. And this should also work in the other direction, if I hover over the <div>Apple, both the <div>Apple and <li>Apple is highlighted.
Notes:
I am able to add the unique class name to any element. Either the <li> & <div> or the <a> within.
Highlighting can be either as an .active class or inline styling.
Similar to the below question but works in both directions:
Jquery 'Highlight' element with the same class
<ul>
<li class="app-hover-select">
<a class="item-1" href="">Apples</a>
</li>
<li class="app-hover-select">
<a class="item-2" href="">Pears</a>
</li>
<li class="app-hover-select">
<a class="item-3" href="">Bananas</a>
</li>
<li class="app-hover-select">
<a class="item-4" href="">Pineapples</a>
</li>
</ul>
<div class="wrapper">
<div class="app-hover-select">
<a class="item-1" href="">
<img scr="">
Apples
</a>
</div>
<div class="app-hover-select">
<a class="item-2" href="">
<img scr="">
Pears
</a>
</div>
<div class="app-hover-select">
<a class="item-3" href="">
<img scr="">
Bananas
</a>
</div>
<div class="app-hover-select">
<a class="item-4" href="">
<img scr="">
Pineapples
</a>
</div>
</div>
My current jQuery with current HTML:
jQuery('.app-hover-select > a').hover(function() {
var appClass = jQuery(this).attr("class");
jQuery(appClass).toggleClass('active');
});
My logic is:
On hover of .app-hover-select > a
var appClass = Get the class
Add class active to all elements with the class appClass

In case you want this:
Try this-
jQuery(".app-hover-select > a").hover(function () {
const listOfItems = this.parentElement.parentElement;
const listItem = this.parentElement;
const i = Array.from(listOfItems.children).indexOf(listItem);
jQuery("ul .app-hover-select").each((_i, el) => {
if (_i === i) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
jQuery(".wrapper .app-hover-select").each((_i, el) => {
if (_i === i) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
});

Not able to add active class that matches current open page to list item of menu

I am having problem while adding the active class to the currently open page. I tried other solutions available on StackOverflow, but nothing worked for me. I think it is because I have ~/ in my link href element. Thanks in advance.
<script>
$(document).ready(function () {
var current = location.pathname;
$('#indexmenu li a').each(function () {
var $this = $(this);
if ($this.attr('href').indexOf(current) !== -1) {
$this.addClass('active')
}
})
})
</script>
<div class="navbar-collapse collapse mancolor" id="adminmenu">
<ul class="nav navbar-nav mancolor" id="indexmenu">
<li><a href="~/Default.aspx" class="active" runat="server">
<span><i class="glyphicon glyphicon-dashboard"></i></span>
<span>Main Screen</span>
</a>
</li>
<li><a href="NewWorkShopVisit.aspx" runat="server">
<span class="fa fa-shopping-cart"></span>
<span>New Workshop Visit</span>
</a>
</li>
<li><a href="Index.aspx" runat="server">
<span><i class="fa fa-cogs"></i></span>
<span>Workshop Control Panel</span>
</a>
</li>
<li><a href="Employees.aspx" runat="server">
<span><i class="fa fa-user-circle-o"></i></span>
<span>Employees</span>
</a>
</li>
</ul>
</div>

You might check if the first character is a ~ and if it is, return the string without it:
$(document).ready(function () {
var current = location.pathname;
$('#indexmenu li a').each(function () {
var $this = $(this);
var href = $this.attr('href');
if (href.charAt(0) === '~') href = href.substr(1);
if (href.indexOf(current) !== -1) {
$this.addClass('active')
}
})
})
$(document).ready(function() {
var current = '/Default.aspx'
$('#indexmenu li a').each(function() {
var $this = $(this);
var href = $this.attr('href');
if (href.charAt(0) === '~') href = href.substr(1);
if (href.indexOf(current) !== -1) {
$this.addClass('active')
}
})
})
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-collapse collapse mancolor" id="adminmenu">
<ul class="nav navbar-nav mancolor" id="indexmenu">
<li>
<a href="~/Default.aspx" runat="server">
<span><i class="glyphicon glyphicon-dashboard"></i></span>
<span>Main Screen</span>
</a>
</li>
<li>
<a href="NewWorkShopVisit.aspx" runat="server">
<span class="fa fa-shopping-cart"></span>
<span>New Workshop Visit</span>
</a>
</li>
<li>
<a href="Index.aspx" runat="server">
<span><i class="fa fa-cogs"></i></span>
<span>Workshop Control Panel</span>
</a>
</li>
<li>
<a href="Employees.aspx" runat="server">
<span><i class="fa fa-user-circle-o"></i></span>
<span>Employees</span>
</a>
</li>
</ul>
</div>

How to get the innerHTML/innerText from a related node of a clicked element?

I would like to get a certain innerText from a clicked element in a HTML document that I clicked.
The corresponding HTML looks something like this:
!DOCTYPE html>
<html>
<head>
<title>Some title</title>
</head>
<body>
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>
</body>
</html>
A Javascript function should return either "First" or "Second" depending on the clicked link.
My basic idea is to add an event listener and use the returned event to get the content of the span element:
function(){
document.addEventListener('click', function(e) {
e = e || window.event;
var spanText= e.path[i].innerText; //Don't know how to assign i correctly
return spanText;
}, false);
}
My problem is that I don't know how to define i or if there is something more suitable than .path[i] to work with. Depending on whether I click the image or the text.

Add the click events to the list items
in the handler, retrieve the 'span' child and get its text
var lis = document.querySelectorAll('.categories li');
lis.forEach(function(el) {
el.addEventListener('click', onClick, false);
})
function onClick(e) {
var li = e.currentTarget;
var span = li.querySelector('span');
console.log(span.innerText);
}
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>

function init(){
document.addEventListener('click', function(e) {
var link = e.target.closest('a');
if(!link)return;
e.preventDefault();
var text = link.textContent;
alert(text);
return spanText;
});
}
init();

You can check what concrete element was clicked and then return its text. if you want to have some additional information - use data- attributes and read target.dataset to read it.
document.addEventListener('click', function(e) {
var target = e.target;
if(target.tagName === 'SPAN') {
console.log(target.innerText);
return target.innerText;
}
}, false);
<ul class="categories">
<li>
<a href="#">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>

If the structure is consistent, then there will always be the same number of <span> elements as <a> elements.
Consequently, if you know the user just clicked on the second <a>, you'll know the <span> you need to return is the second <span>.
Working Example:
var links = document.querySelectorAll('li a');
var spans = document.querySelectorAll('li div span');
function getTextContent(e) {
e.preventDefault();
var linksArray = Array.prototype.slice.call(links);
var index = linksArray.indexOf(this);
console.log(spans[index].textContent);
}
links.forEach(function(link){
link.addEventListener('click', getTextContent, false);
});
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>

Sorry for my bad language..
I'm late to reply.
Maybe it will help someone else;
window.addEventListener("click", (event) => { //dblclick
let div = event.target.innerText; // <-- the code you want
window.onClick(div);
});
And..
function onClick(div) {
console.log(`(Tıklandı-Clicked) innerText: ${div}`);
}
the code you want : let div = event.target.innerText;

Adding a class to body when a Hyperlink tag is clicked which is in the child ul of li tag using jquery

I want to add a class to body when a link is clicked. This is easily done when the link is in the parent ul, but my problem is that i want to do that for the the link present in the child ul of parent li. Whenever I try to do this It has no effect.
What I am trying to do is as given below:
Script:
<script>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function () {
$("body").addClass("sidebar-collapse");
});
});
</script>
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>
Thank you in advance.

Try with on('click',...), may be your Navigation will generate dynamically after load page so you have to use delegated event binding
$(document).ready(function () {
$(document).on('click','ul.treeview-menu a.links',function () {
$("body").addClass("sidebar-collapse");
});
});
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>

you have two issues:
1- this line //}); it was commented and was preventing your code from working.
2-when the hyperlink is clicked it refreshes the page and thus any class you've added to your previous html has been erased that's why you want be able to see any change.
try this:
<script>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function (e) {
e.preventDefault()
$("body").addClass("sidebar-collapse");
});
});
</script>
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>

$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function (e) {
e.preventDefault()
$("body").addClass("Enter your class name");
});
});

getting content of <li> when it is clicked

I have a list. And am trying to get the context of the list when the user clicks the text using prototype. But this code doesn't not alert the message. What is the wrong with the code?
The code can be seen here:
www.modernarapca.com/test.php
JavaScript:
$$('ul#myList2 li').each(function(elmt) {
elmt.observe('click', function(ev) {
var tab;
tab = elmt.down('a').readAttribute('href');
alert("entered");
});
});
Markup:
<ul id="myList2">
<li>
<a href="javascript:;" class="" >text1</a>
</li>
<li>
<a href="javascript:;" class="" >text2</a>
</li>
<li>
<a href="javascript:;" class="" >text3</a>
</li>
</ul>

Or maybe this one...
$('document').ready(function() {
$('#myList2 li').on('click', function(el) {
console.log(el.target);
var cont = $(el.target).html();
alert(cont);
});
});