Develop Reference

JS hide div if it has a class added via JS

I am working on a code where an active class is added to a div via JS.
What I would like to do is, when that div has active class, hide another div. But, due to the active class was added via JS, this code doesn't work:
if($("#section3").hasClass("active")) {
$(".menu").fadeOut("fast");
}
I think I would need to use the on function: .on()
Something like this, but it's not working... Any ideas?
$("#section3").on( function() {
$(this).hasClass('active') {
$(".menu").fadeOut("fast");
}
});
EDITED:
I'm afraid I cannot paste the code because I am using a plugin. This is the one that I am using, so you can see the functionality there.
I've added this bullet menu to it:
<ul id="menu">
<li data-menuanchor="slide1"><span></span></li>
<li data-menuanchor="slide2"><span></span></li>
<li data-menuanchor="slide3"><span></span></li>
<li data-menuanchor="slide4"><span></span></li>
</ul>
Each slide has a active class when it's on viewport, so what I would like to achieve is when the last slider is active, hide the menu

$(document).ready(function(){
$('section').click(function(){
$(this).addClass('active');
if($('section').hasClass('active')){
$('ul#menu').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>check</section>
<ul id="menu">
<li data-menuanchor="slide1"><span></span></li>
<li data-menuanchor="slide2"><span></span></li>
<li data-menuanchor="slide3"><span></span></li>
<li data-menuanchor="slide4"><span></span></li>
</ul>

oth the section and the li have active classes so you could use something like this or use the afterSlideLoad event if it is depeding of the slideshow
$(window).on("scroll",function() {
if ($('#menu li:last-child').hasClass("active")) {
("#menu").fadeOut("fast")
}
})
or you can use slideIndex to check if you are on the last slide. see here > afterSlideLoad

targeting a li with javascript without a ID

I have a mobile nav, that looks like this
<ul id="mobile-menu" class="menu>
<li class="normal-link">link-1</li>
<li class="dropdown-link">link-2
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="dropdown-link">link-3
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="normal-link">link-1</li>
</ul>
I cant change the html/wordpress generated code, but I can add css and javascript. So is there a way for me to get next to the dropdown-link's a image that will let the submenu free. if the image is pushed the image will change. if pushed again it will go back to the normal image and the dropdown dissappears again?
I am mostly looking for answer for the problem with of javascript on the dropdown link's but just so you know what i want to do with it.

This question is so very, very vague. But I guess you're looking for the nth-child() selector.
See the docs here for more information. Target your 'mobile-menu' ul, and use nth-child to select the li elements within.
My big question would be, why can't you change the HTML? If it's Wordpress, you can modify the template to change the HTML.

You question is not really clear but if you want to retrieve an element without using id, first you may use their classes
var myClass = document.getElementsByClassName("classname"); //returns a nodeList like array
myClass[0] //first element with "classname"
You may also use tag names
var divs = document.getElementsByTagName("div");
divs[2] //third "divs"
You may also use querySelectorAll, this works pretty much like CSS selector and also returns a nodeList
var qs = document.querySelectorAll(".class");
I hope this helps

You could add a class and use the Jquery class selector: $(".class-name") to target a specific <li>

.first() element not working with dynamic generated <li>

I think I am missing some minor concept here, but have done enough googling to find that but no use. Hence posting on this forum seeking some help.
I am generating navigation tab dynamically using this code:
<div class="tabbable">
<ul class="nav nav-tabs" id="testing">
<li ng-repeat="storageOption in gridOptions[$index].ownedJay" class=""><a href="#c{{storageOption.StorageHostname}}" >Data{{storageOption.StorageHostname}}</a></li>
</ul >
In above code, class is left blank. Above code can create many li based on number of elements in storageOption (ng-repeat).
But I want to add class "active" in first li only.
For that I have added following code in the script section of same page:
$(".tabbable ul li").first().addClass("active");
But above code is adding active class in all the li generated.
Can anyone please let me know where I am missing here.
Thanks in advance.

You need to do it in angular way, as angular does provided that option by ng-class that basically need expression like ng-class="{'class': expression}".In ng-class expression you could use $first that tells you its first element of ng-repeat or not, and use ng-href instead of href.
Markup
<li ng-repeat="storageOption in gridOptions[$index].ownedJay" ng-class="{'active': first}">
<a ng-href="#c{{storageOption.StorageHostname}}" >Data{{storageOption.StorageHostname}}</a>
</li>
Alternative
If you want to make active togglable then you could simply maintain one flag that will have the information of which li is selected.
<ul class="nav nav-tabs" id="testing" ng-init="selected=0">
<li ng-repeat="storageOption in gridOptions[$index].ownedJay"
ng-class="{'active': $index == $parent.selected}"
ng-click="$parent.selected == $index">
<a ng-href="#c{{storageOption.StorageHostname}}" >
Data{{storageOption.StorageHostname}}
</a>
</li>
</ul >
In above markup I used $index but you could unique thing if you have it you ng-repeat array.

$(".tabbable").find('li:nth-child(1)').addClass("active");
Try using a different selector to select the first li
FIDDLE

You can use ng-class attribute to check if the $index is 0 then add class active.

How to hide an element after clicking it's child element using JavaScript

I want to hide ul.media-boxes-drop-down-menu area after clicking any menu http://prntscr.com/7j5rmz item. I was tried many times with different different codes. But I was unable to solve it. Any one can help me how may I do it?
Thanks in advance.

Your question is ambiguous. from what i have understood.
<ul id="ul_1">
<li >Some text</li>
</ul>
<ul class="active" id="ul_2">
<li >Some text</li>
</ul>
clicking on ul_1 will hide ul_2, refactor the code according to your need.
$('#ul_1').on('click', function (e) {
$('#ul_2').each(function () {
$(this).removeClass('active');
})
});

you have to give a class to that element you want to hide and then on-click() event you have to search that element inside wrapper main div like:
$('.elementTohode',$(this).parent().parent()).css('display','none')

Retrieve text of anchor within <li> element using jQuery

I'm completely STUCK with this very simple task, I would be glad for any advice.
I've created a dropdown menu for user selection using <ul> and <li>. Once the user clicks on a certain menu Item (from the class submen), this item gets the class active assigned to it.
<ul id="firstid">
<li id="secondid">Title1
<ul class = "submen">
<li class = "active">Option1</li>
<li>Option2</li>
</ul>
</li>
</ul>
Now I want to retrieve the text "Option1" since the user has selected this item in the above example and its class is active. How do I go about this using jQuery? This doesn't seem to work:
var selected_option = $("#secondid" ".submen" ".active" "a").text();

Chained selector looks like this:
var selected_option = $("#secondid .submen .active a").text();