We Keep Coding

add class to next sibling element In Javascript

How could I add toggle class? When I click on anchor tag it should add class to only next sibling element ( .treeUlChild ). i tried a lot and try to find solution but couldn't. I am new and this is my first project in javascript.
here is my html code.
<div id="treeList" class="treeDiv">
<ul class="treeUl">
<li>
GUIDELINES
<ul class="treeUlChild treeLevel2">
<li> Guidlines 1</li>
<li> Guidlines 2</li>
<li> Guidlines 3</li>
<li> Guidlines 4</li>
</ul>
<!-- End Child Ul -->
</li>
<li>
AFTER-SALES
<ul id="test" class="treeUlChild treeLevel2">
<li>xyz</li>
<li>
def
<ul class="treeUlChild treeLevel3">
<li>
ASSETS
<ul class="treeLevel4">
<li>DIGITAL</li>
<li>OOH</li>
<li>POS</li>
<li>PRINT</li>
<li>SOCIAL GIF</li>
<li>SOCIAL VIDEOS</li>
</ul>
<!-- End Child Ul -->
</li>
</ul>
<!-- End Child Ul -->
</li>
</ul>
<!-- End Child Ul -->
</li>
</ul>
<!-- End treeUl -->
</div>
This is my javascript code.
document.querySelector('#treeList ul li a').addEventListener("click", function(){
document.querySelector('.treeUlChild').nextSibling.classList.toggle('done');
});

One issue is nextSibling returns a node object, it's better you use nextElementSibling which returns an element node. The other issue is querySelector will always return the first element with the specified selector, so the changes will always be reflected on the same element whichever link you clicked. You may rather use querySelectorAll which returns all the elements as a node list, and loop through each element and apply the changes. Another thing is, it's better to use event.target to get clicked element and rather than using a selector again.
document.querySelectorAll('#treeList ul li a').forEach(elem => elem.addEventListener("click", function(){
event.target.nextElementSibling.classList.toggle('done');
}));

There is very simple way using Bootstrap by the way.
But if you want to do that with pure Javascript, you're on the right way to it.
So first, transform your query selector into a object e.g:
var el = document.querySelector('#treeList ul li a');
forEach method, querying the single object clicked in the array of multiple objects:
el.forEach(yourFunctionName());
Add functions to your elements:
<li><a onclick="yourFunctionName()" href="#"> Guidlines 1</a></li>
<li><a onclick="yourFunctionName()" href="#"> Guidlines 2</a></li>
<li><a onclick="yourFunctionName()" href="#"> Guidlines 3</a></li>
<li><a onclick="yourFunctionName()" href="#"> Guidlines 4</a></li>
ps: you can simplify this.
Structure your function:
function myFunctionName(){
document.querySelector('.treeUlChild').nextSibling.classList.toggle('done');
}

List Item Styling | Added Dynamically | Update Styling

I have a ul element which I need to add list item dynamically. UL element has class name res. I don't want to add class to list item. Is there anyway to add the list item dynamically without losing the style..!
<ul class="res">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Short Codes</li>
<li>Contact</li>
<li><a id="login" href="login.html">login</a></li>
<li><a id="logout">Hello Guest<span class="arrorow">▼</span></a>
<ul class="sub-menu">
<li>View Profile</li>
<li>Booking History</li>
<li>Logout</li>
</ul>
</li>
</ul>
EDIT 1:
I attached a pic here... Please see it carefully.
I added those circled ones dynamically. Please check the styling of that...!

You can use ELEMENT NAME to style it without the need of adding class to each element.
For example:
ul.res li {
color: red;
}
The above code will apply color red to all li elements inside ul with class res.

Using
$('.res').append('<li>Location</li>')
this resolved the issue...!

Hover an element, add class to another div with same class

I already found a part of my problem but it still needs work.
What i want to achieve is when i hover over a div, others divs should have class added to them if the original class is the same.
So let's start.
I have a menu:
<ul id="listz"><li class='has-sub'><a href='/produse/trape-de-fum-si-ventilatie/'><span>Smoke vents</span></a>
<ul>
<li class='has-sub'><a href='/produse/trape-de-fum-si-ventilatie/trape-de-fum/'><span>Trape de fum</span></a>
<ul>
<li><a href='/rokvent-simplu-canat'>RokVent Simplu canat</a></li>
<li><a href='/pheonix-dublu-canat'>Phönix Dublu canat</a></li>
<li><a href='/megaphonix'>Megaphönix</a></li>
<li><a href='/megastar'>MegaStar</a></li>
<li><a href='/firefighter'>Firefighter</a></li>
<li><a href='/smokejet'>SmokeJet</a></li>
<li class='last'><a href='/multijet'>MultiJet</a></li>
</ul>
</li>
<li class='has-sub'><a href='/produse/trape-de-fum-si-ventilatie/trape-de-ventilatie-si-vizitare/'><span>Trape de ventilatie si vizitare</span></a>
<ul>
<li><a href='/rokvent-luminatoare-fixe'>RokVent(luminatoare fixe)</a></li>
<li class='last'><a href='/rokpas-luminatoare-acces'>RokPas(luminatoare acces)</a></li>
</ul>
</li>
</ul>
</li></ul>
As you can see i have Parent "Smoke vents" that has children.
The menu is on the left side. On the right side i will have a picture with a warehouse that has smoke vent elements. When you hover over them, they change color.
At that moment the menu needs to open and show the associated product that is in the menu. So when you hover over the element of the warehouse it should add class to the menu so i can change the background and show that that element is that product or products.
One problem is that i need it to match them by class (wich i will make unique by each element).
The second problem is that the menu does not open when i hover over a part of the image. If i have the menu open i can see the highlighted item in the menu.
This is the code that i got now and does the hovering part but only by matching in order.(what i mean is that if i add only to the parents the class it shows right but if i add to a child also then the last parent will not have a addClass):
<script type="text/javascript">
$("#listz1 li,#listz2 li").hover(function() {
var index = $(this).index();
$("#listz1, #listz2").each(function() {
$(".link1",this).eq(index).toggleClass("hoverz");
});
});
</script>

Zurb Foundation Top Nav bar having multiple back buttons

I'm creating a whole website using Java / JSP, but also using zurb foundation.
Now I know that you have to call $(document).foundation(); to make foundation work, but because I'm using ajax to switch between screens (does not have that flash effect of that white screen when switching between pages) when I open my home page it executes that method ($(document).foundation();) and everything looks fine.
The problem comes in with the Top Nav bar that I have. If it goes over to the mobile version, you get that Menu button on the right hand side, and switching there between sub categories, shows a "Back" button to go back to the parent category.
The problem begins when I open my next page (using ajax), it now has components on there namely components. These in fact looks way better on foundation than the normal standard html ones. When I execute $(document).foundation(); again, the components goes into the foundation styled components but now with the top nav bar, there are 2 back buttons and that messes around with the functionality of the back button as well i.e. breaks it. When I go to the screen again, it adds another back button and so on.
Is there someway to revert the foundation() method, and then call it again to refresh it?
This is my Top Nav bar.
<div class='fixed contain-to-grid' style='height:67px;'>
<div class='large-12 columns' id='topNav'>
<nav class='top-bar'>
<ul class='title-area'>
<!-- Title Area -->
<li class='name'>
<h1><a href='#'><img src='img/logoLeft.png' style="width:181px;" id='logo'/></a></h1>
</li>
<!-- Remove the class 'menu-icon' to get rid of menu icon. Take out 'Menu' to just have icon alone -->
<li class='toggle-topbar menu-icon'><a href='#'><span>Menu</span></a></li>
</ul>
<section class='top-bar-section'>
<ul class="left">
<li class="divider" id='div1' style='display:none;'></li>
<li class="has-dropdown" id='nonFinNav' style='display:none;'>Non-Financial
<ul class="dropdown">
<li><label>Heading 1</label></li>
<li>Cat 1</li>
<li class="divider"></li>
<li>Cat 2</li>
<li class="divider"></li>
<li>Cat 3</li>
<li class="divider"></li>
<li class="has-dropdown"><a href="#" id='leaveMain'>Cat 4</a>
<ul class="dropdown">
<li><label>Leave</label></li>
<li>SubCat 1</li>
<li class="divider"></li>
<li>SubCat 2</li>
<li class="divider"></li>
<li>SubCat 3</li>
<li class="divider"></li>
</ul></li>
<li class="divider"></li>
</ul>
</li>
<li class="divider" id='div2' style='display:none;'></li>
<li class="has-dropdown" id='FinNav' style='display:none;'><a href="#" style='margin- right:29px;'>Financial</a>
<ul class="dropdown">
<li><label>Heading 2</label></li>
<li>Cat 1</li>
<li class="divider"></li>
<li>Cat 2</li>
<li class="divider"></li>
<li>Cat 3</li>
<li class="divider"></li>
<li>Cat 4</li>
<li class="divider"></li>
</ul>
</li>
<li class="divider" id='div3' style='display:none;'></li>
</ul>
<!-- Right Nav Section -->
<ul class='right'>
<li><a id='logOffButton' style='display:none;'>Log Off</a></li>
<li class='divider'></li>
<li><a id='helpButton'>Help</a></li>
<li class='divider'></li>
</ul>
</section>
</nav>
</div>
</div>
If you need any more info, please ask and I will respond.
Thanks.

I've been having the same issue. I couldn't find a solution through foundation, but I did come up with something that's suitable for my purposes.
Firstly, instead of simply doing $(document).foundation(), I execute
$(document).foundation({topbar : {custom_back_text: false }});
This makes it so that the "back" button is now named after its previous menu. So, each back button title should be unique. It's important that they are unique. Now, I have a script that removes all duplicate menu items, based on their link text. I have it set to trigger each time someone clicks on a menu item with sub-items (foundation gives these a class of 'has-dropdown not-click'). This way the script only runs when it's truly needed.
function (){
var uniqueBackButtons = [];
$.each($('.back'), function(){
if(uniqueBackButtons.indexOf(this.childNodes[0].childNodes[0].childNodes[0].data) == -1){
uniqueBackButtons.push(this.childNodes[0].childNodes[0].childNodes[0].data);
}
else{
$(this).remove();
}
});
}

I also have the same issue.
I think the reason why I do have multiple "back" button is because of multiple declaration of this code:
$(document).foundation();
Notice that I have embedded this
<script src="js/app.js"></script>
that also contains that script. It works to me. I put all my scripts on js/app.js

Add a class with Jquery or Javascript to <a> tag

I have the following markup:
<ul class="menubar">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
I need help figuring out how to add a class using Jquery or Javascript (preferably Jquery) according to the active page. Example, when on the "Home.php" page, I would like to add the class ".selected" to the active <a> tag and at the same time add the class ".none" to all the other links.
Therefore, when being on the "home.php" page the code should look like this:
<ul class="menubar">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
According to the way the rest of the code works, I need the class to be assigned to the <a> tag and not to the entire <li> item. Any ideas are appreciated.

Try something like this (you might need to use different properties from location, like href or pathname, but you get the idea):
$('ul.menubar a').each(function(){
if(location.href === this.href){
$(this).addClass('selected');
$('ul.menubar a').not(this).addClass('none');
return false;
}
});
Or better yet:
$('ul.menubar a').addClass('none').filter('a[href="'+location.pathname+'"]')
.removeClass('none').addClass('selected');
Here's more info on the location object: https://developer.mozilla.org/en/DOM/window.location

A very simple method, no guarantees on efficiency though.
HTML :
<ul class="menubar">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
Javascript:
$(document).ready(function() {
$("#"+ $.trim( $("title").html() ) ).addClass("selected");
});
Edit: added $.trim(), just an extra step.

Just add ID attribute to your "a tags" and using jQuery do:
$("#home").addClass('selected');