Get grand parent of childs on click - javascript

I want to get grand parent id by clicking on every child, Used event.target.parentNode.id but it just return parent of current element, the goal is get #HereIAm id when you click on every childs. any idea?
$(window).click(function(event) {
console.log(event.target.parentNode.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="HereIAm">
<ul>
<li><a>click me</a></li>
<li>click me</li>
</ul>
<span>click me</span>
<div>
<div>
<span>click me</span>
</div>
</div>
</div>

Given the HTML, one option is to use .closest and use the selector string div[id] to select the nearest ancestor with an id attribute:
$(document).click(function({ target }) {
const closest = target.closest('div[id]');
if (closest) console.log(closest.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="HereIAm">
<ul>
<li><a>click me</a></li>
<li>click me</li>
</ul>
<span>click me</span>
<div>
<div>
<span>click me</span>
</div>
</div>
</div>

If you want to get HereIAm by taping click me you can simply access parent of the parent of click me
function getGrandParent(target){
if(target.parentElement.id === 'HereIAm'){
console.log(target.parentElement.id)
}else{
getGrandParent(target.parentElement);
}
}
<div id="HereIAm">
<ul>
<li onclick='getGrandParent(this)'><a>click me</a></li>
<li onclick='getGrandParent(this)'>click me</li>
</ul>
<span onclick='getGrandParent(this)'>click me</span>
<div>
<div>
<span onclick='getGrandParent(this)'>click me</span>
</div>
</div>
</div>

Related

Add class to a div if another div has a class

I did a lot of searching and read dozens of questions and answers on this topic and wrote the following code but it won't work for some reason. I'm looking for help troubleshooting this.
This is what I want to happen:
When the user hovers over a menu item, a dropdown appears.
Then the entire header (currently has the ID #header) gets a new class (.header-new-class)
I found that when they hover over a menu item (li), the site automatically adds the class "open" to the menu item (the menu item already has the class .menu-item)
So my logic is, when the menu item has the class "open", it adds the class "header-new-class" to the div with the ID #header
This is a very cleaned up version of the HTML:
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
This is the code I wrote:
$(document).ready(function(jQuery) {
if ($('.menu-item').hasClass('open')) {
$('#header').addClass('header-new-class');
}
});
It's not working. What am I doing wrong?
Thanks in advance.
if you want to add a class on the header when the mouse is on the menu item, do it like this,
if you also want to remove the class then use the commented code below.
if you have questions, feel free to ask
$(document).ready(function(){
$('.menu-item').on('mouseover',function(){
/*$('.menu-item').removeClass('open');
$(this).addClass("open");*/
if($(this).hasClass('open')){
$('#header').addClass('yourNewClass');
}else{
$('#header').removeClass('yourNewClass');
}
});
/*$('.menu-item').on('mouseleave',function(){
$('.menu-item').removeClass('open');
$('#header').removeClass('yourNewClass');
});*/
});
.yourNewClass .menu-item.open {color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
item 1
</li>
<li class="menu-item">
item 2
</li>
<li class="menu-item">
item 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
You can use same event many times. So, this is achievable with normal .hover.
$(document).ready(function(){
$('.menu-item').hover(function(){
$('#header').addClass('header-new-class');
},function(){
/* function to remove class when hovering is over */
})
If you absolutely need to check if the class open is present you can do it inside the hover function.
You can also use mouseenter and mouseleave
$(document).on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, ".selector");
Why you are set class for hover via jquery. CSS have functionality of :hover which give the same effect that you want.
#header:hover{
background-color : lightBlue;
}
.menu-item:hover{
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item">
Sample Link 1
</li>
<li class="menu-item">
Sample Link 2
</li>
<li class="menu-item">
Sample Link 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>

How to hide and show elements based on current hovered element?

We need to be able to hide and show elements based on currently hovered element. We have tried the following below, but it does not add the is-active class and remove it based on what other element is on hover.
How can we hide and show elements based on the current hovered element?
Goal (based on example below):
when you hover over some under first, display <div class="two" id="some-link">some link</div> using is-active class
when you hover over path under first, <div class="two" id="some-link">some linke</div> should not display (remove is-active class), and <div class="two" id="path-link">path link</div> should display (add is-active class)
Current issue:
is-active class is not being removed when on hover element is changed
$(function() {
$('li#two').hover( function() {
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
var el_parent = el_two.parent().parent();
el_parent.find('.is-active').removeClass('is-active');
$(el_sel).addClass('is-active');
});
});
.two {
display: none;
}
.is-active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">
first
<div class="one">
<ul>
<li data-at="some-link" id="two">
some
</li>
<li data-at="path-link" id="two">
path
</li>
<li data-at="another-one" id="two">
another one
</li>
</ul>
<div class="dropdown">
<div class="two" id="some-link">some link text</div>
<div class="two" id="path-link">path link</div>
<div class="two" id="another-one">another one</div>
</div>
</div>
</li>
<li id="one">
second
<div class="one">
<ul>
<li>
another some
</li>
<li>
another path
</li>
</ul>
</div>
</li>
<li id="one">
third
<div class="one">
<ul>
<li>
third some
</li>
<li>
third path
</li>
</ul>
</div>
</li>
</ul>
First your .find() is using the wrong selector. You have find('is-active') which is an element name selector, you wanted a css class selector ie .is-active.
el_parent.find('.is-active').removeClass('is-active');
Note for removeClass() you don't use a css selector you just use a class name hence why you don't need the dot in that call
Now if you wanted to also have the class removed on hovering out of the element as well then you need to add an event listener for that, and call removeClass from there. .hover() uses a second argument for setting such an event listener callback.
$('li#two').hover(onHoverCallback,function(){
//code for finding the right element
$(el_sel).removeClass('is-active');
})
$(function() {
$('li#two').hover( function() {
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
var el_parent = el_two.parent().parent();
el_parent.find('.is-active').removeClass('is-active');
$(el_sel).addClass('is-active');
},function(){
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
$(el_sel).removeClass("is-active");
});
});
.two {
display: none;
}
.is-active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">
first
<div class="one">
<ul>
<li data-at="some-link" id="two">
some
</li>
<li data-at="path-link" id="two">
path
</li>
<li data-at="another-one" id="two">
another one
</li>
</ul>
<div class="dropdown">
<div class="two" id="some-link">some link text</div>
<div class="two" id="path-link">path link</div>
<div class="two" id="another-one">another one</div>
</div>
</div>
</li>
<li id="one">
second
<div class="one">
<ul>
<li>
another some
</li>
<li>
another path
</li>
</ul>
</div>
</li>
<li id="one">
third
<div class="one">
<ul>
<li>
third some
</li>
<li>
third path
</li>
</ul>
</div>
</li>
</ul>

making event on wrapper element

First, my HTML tag is here
<ul>
<li>
<form>...</form>
<div>
<div class="A"></div>
<div class="B"><img class="wantToShow"></div>
</div>
<div class="C"></div>
</li>
<li>...</li>
</ul>
What I want to do is that when I mouse over <li>, the small image, <img class="wantToShow"> , is shown up(like hover).
But when I add event on each <li> element the following problems occur.
If I use jQuery.mouseover(<li>, function), the whole element in <li> shown up whenever I move mouse cursor in <li>.
If I use jQuery.mouseenter(<li>, function), an element, my mouse cursor enter at first, shown up. In this case, the real problem is that the event do not catch <li> but an element in <li>.
What can I do for this... Thank you!
I think something like this is what you are after:
$('li').on('mouseover',function() {
var $this = $(this);
if($('.wantToShow').is(':hidden')) {
$this.find('.wantToShow').show();
} else {
$this.find('.wantToShow').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<form>This is A</form>
<div>
<div class="A"></div>
<div class="B">
<img src='https://placebear.com/200/300' class="wantToShow">
</div>
</div>
<div class="C"></div>
</li>
<li>This is B</li>
</ul>

Is there a way to return the top or second parent element of a specified element using JavaScript?

I would like to get the top parent element (section) of a myLI id.
My HTML code is:
<section>
<div>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
</div>
</section>
My code is:
var x = document.getElementById("myLI").parentElement.nodeName;
My code returns UL but I would like for it to return section.
If you want to target the parent by tagName you could use .closest(selector); like :
var x = document.getElementById("myLI").closest('section');
NOTE : Take a look to the Browser compatibility section.
Hope this helps.
var x = document.getElementById("myLI").closest('section');
console.log(x.tagName);
<section>
<div>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
</div>
</section>
var topParent = document.getElementById("myLI");
while( topParent.parentElement.nodeName != 'BODY' ){
topParent = topParent.parentElement;
}
console.log( topParent.nodeName );
<section>
<div>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
</div>
</section>
So I'm assuming you want the element right before the 'BODY' element?
"I will probably have it execute when a user clicks a radio button or on some type of click."
Then just set up the click event on the section elements:
var sections = Array.prototype.slice.call(document.querySelectorAll("section"));
sections.forEach(function(section){
section.addEventListener("click", function(){
console.log(this.id);
});
});
<section id="one">
<div>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
</div>
</section>
<section id="two">
<div>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
</div>
</section>
<section id="three">
<div>
<ul>
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
</div>
</section>

Locate the value of an attribute, match and find the value on other elements and alter the css

So essentially I am trying to find the value of an attribute, in this instance, 'data-location', and then search for that value elsewhere, in this instance in the form of an ID, and alter the CSS for that matched value.
I have the below so far which I thought would work, but I am not sure how to check for various different values for various elements and apply accordingly, so I have grouped the different sections in div's with classes so I can break them up from one another
Thanks guys
var getvalue = $('ul#test').find('li').attr('data-location');
if( $('div.other div').attr('id').val() == getvalue ) {
$( this ).css('background-color','red');
};
#thebirchplot3 {
padding:30px;
background:#fff;
}
#theashplot3 {
padding:30px;
background:blue;
color:#fff;
}
#thediveplot1 {
padding:30px;
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 id="title">Change CSS based on values</h1>
<ul id="test">
<li data-location="thebirchplot3">one</li>
<li data-location="theashplot3">two</li>
<li data-location="thediveplot1">three</li>
</ul>
<ul id="show">
<li data-location="theashplot3">one</li>
<li>two</li>
<li>three</li>
</ul>
<ul id="display">
<li data-location="thediveplot1">one</li>
<li>two</li>
<li>three</li>
</ul>
------
<div>
<div class="other">
<div id="thebirchplot3">
adfasdfasfsafdsafdsfsadfdsafdsafdsfafadsf
</div>
<div id="theashplot3">
adfasdfasfsafdsafdsfsadfdsafdsafdsfafadsf
</div>
<div id="thediveplot1">
adfasdfasfsafdsafdsfsadfdsafdsafdsfafadsf
</div>
</div>
</div>
You need to do it like below:-
Working Example:-
$('ul#test').find('li').each(function(){ // iterate over each li element
var ultest = $(this); //assign current li object to variable
$('div.other').children().each(function(){ // now iterate to each child div of other div
if($(this).attr('id') == ultest.data('location')){ // compare id with data-location
$( this ).css('background-color','red'); // if same then add background color
}
});
});
#thebirchplot3 {padding:30px;background:#fff;}
#theashplot3 {padding:30px;background:blue;color:#fff;}
#thediveplot1 {padding:30px;background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="title">Change CSS based on values</h1>
<ul id="test">
<li data-location="thebirchplot3">one</li>
<li data-location="theashplot3">two</li>
<li data-location="thediveplot1">three</li>
</ul>
<ul id="show">
<li data-location="theashplot3">one</li>
<li>two</li>
<li>three</li>
</ul>
<ul id="display">
<li data-location="thediveplot1">one</li>
<li>two</li>
<li>three</li>
</ul>
------
<div>
<div class="other">
<div id="thebirchplot3">
this is dummy
</div>
<div id="thebirchplot355435">
text
</div>
<div id="theashplot3">
which shows you
</div>
<div id="theashplot35465464">
that everything
</div>
<div id="thediveplot1">
working fine now
</div>
</div>
</div>
use jquery find() method for your requirement as
var getvalue = $('ul#test').find('li').attr('data-location');
$('div.other').find('#'+getvalue).css('background-color','red');
working fiddle is js fiddle

Categories

Resources