I have this html structure
<script>
$(document).ready(function(){
var active_menu = "menu2";
//here do like, add .active to the #menu2 element.
});
</script>
<ul>
<li id="menu1">menu 1</li>
<li id="menu2">menu 2</li>
<li id="menu3">menu 3</li>
</ul>
Now what I want is to add a class name named "active" to the match element id name within the active_menu variable. How to do that? I know I can use if and else statement or switch to achieve that but it will look awfully long way code implementation.
PS: to sharpen the details above, basically what I'm trying to do is add a class to the element which has an id match to the variable active_menu.
any help, suggestions, recommendations would be greatly appreciated.
$(document).ready(function(){
var active_menu = "menu2";
$('#'+active_menu).addClass('active');
});
This should do the trick
Fiddle
$(function(){
var active_menu = "menu2";
$('#'+active_menu).addClass('active');
$('#'+active_menu).find('a').addClass('active');
});
This should do the trick:
$('#' + active_menu).addClass('active')
You should do this :
$(document).ready(function(){
var active_menu = "menu2";
$('#'+active_menu ).addClass('active');
//here do like, add .active to the #menu2 element.
});
you can do this
$('#' + active_menu).addClass('active');
Related
I'm using foundation drop-down
You can have a look at it here:
http://foundation.zurb.com/docs/components/dropdown.html#
I've created a dropdown with the following code
<a href="#" data-dropdown="drop1" >Date Range </a>
<ul id="drop1" class="f-dropdown large date-menu" drop-down-content>
<li id="custom">Custom</li>
<li id="today">Today</li>
<li id="yesterday">Yesterday</li>
<li id="sundaytoToday">This Week(Sun-Today)</li>
<li id="montoToday">This Week(Mon-Today)</li>
</ul>
I want to get the value/id of the selected element
I've tried like below, but it's not working
$('#drop1').click(function(){
var ss=$('#drop1').val();
console.log(ss);
});
I'm a newbie to programming any help appreciated.
Thanks in advance
UPDATE: How to close the dropdown on click?
You need .text() or .html() not .val().
.val() works with form elements like input, select, radio, checkbox etc.
$('#drop1 li').click(function(){
var ss = $(this).text(); //this refers to current element clicked here.
//to get id
var id = this.id;
console.log(ss, id);
});
“this” Keyword
here is correction
$('#drop1 li').click(function(){
var id=$(this).attr('id');//to get id of clicked element
console.log(id);
var h=$(this).text();//to get text of clicked element
console.log(h);
});
update
$('#drop1 li').click(function(){
var id=$(this).attr('id');//to get id of clicked element
console.log(id);
var h=$(this).text();//to get text of clicked element
console.log(h);
$(this).parent().fadeOut(300);
$('.open').removeClass('open');
});
as per doc, class open is added to selected element. you can get selected using:
$('#drop1').click(function(){
var ss=$('this).find('.open').html();
console.log(ss);
});
I am trying to append an tag for an icon to an tag using JQuery.
This is the code for how I am trying to append it:
$loginLink = $('ul.nav li:eq(2) a');
$loginLink.append("<i class='icon -login' aria-hidden='true'></i>");
For some reason, it does not work :(
JQuery is new to me so any help will be greatly appreciated.
Thanks.
Here you have a working fiddle :
http://jsfiddle.net/LDvTX/
<ul class="nav">
<li><a>list item 1</a></li>
<li><a>list item 2</a></li>
<li><a>list item 3</a></li>
<li><a>list item 4</a></li>
<li><a>list item 5</a></li>
</ul>
$loginLink = $('ul.nav li:eq(2) a');
$loginLink.append("<i class='icon -login' aria-hidden='true'>HERE</i>");
Try to do something like this:
$loginLink = $('ul.nav li:eq(2) a');
$($loginLink).append("<i class='icon -login' aria-hidden='true'></i>");
This should work.
Try this :
$loginLink = $('ul.nav li:eq(2) a');
alert($loginLink.length); // must be different from 0 (just to be sure your selector is matching a dom element)
$newElement = $("<i>").html("myText")
.prop("aria-hidden","true")
.addClass("icon")
.addClass("-login") ;
$loginLink.append($newElement);
The point is to create a new dom element using $newElement = $('<i>').
After that you add properties and class as you want.
Finally, you append it to the container $loginLink.
Creating a new element let you remove it later if you need :
$newElement.detach(); // detach from dom, but still existing and can be re-appended.
or
$newElement.remove(); // detach and delete the element.
EDIT : you can also use the short method :
$loginLink.append($("<i>").html("myText")
.prop("aria-hidden","true")
.addClass("icon")
.addClass("-login")
);
Are the tags previously dynamically generated ? What fire the actions ?
Suppose I have a List like the following
<ul>
<li id="slide-a" class="slide-li active-slide"><a href="#" >A</a></li>
<li id="slide-b" class="slide-li"><a href="#" >B</a></li>
<li id="slide-c" class="slide-li"><a href="#" >C</a></li
</ul>
Now , using Jquery I wanna Find out which Element has the class 'active-class'. One way would to have a nested if statement something like this:
if($("#slide-a").hasClass('active-slide'))
{
active = 'slide-a';
}
else
{
if($("#slide-b").hasClass('active-slide'))
{
active = 'slide-b';
}
else
{
if($("#slide-c").hasClass('active-slide'))
{
active = 'slide-c';
}
}
}
My question is if there exists any way to optimize the code above. Is there a generic way to achieve this such that even if I add 10 more li's in the ul the code just works fine without any modification.
Maybe just
var active = $(".active-slide").attr("id");
Demo
Use Attribute starts with selector and .each(). Try this:
$(document).ready(function(){
$('li[id^=slide]').each(function(){
if($(this).hasClass('active-slide'))
alert($(this).attr('id'));
});
});
DEMO
If you have more than one li with classactive-slide use this:
$(document).ready(function(){
var idVal = [];
$('li[id^=slide]').each(function(){
if($(this).hasClass('active-slide'))
idVal.push($(this).attr('id'));
});
console.log(idVal);
});
DEMO
You could a use jQuery $.each() on the ul to iterate through.
fiddle coming in a second.
I have 5 (maybe more) li elements.
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
I want to get which elements was clicked(which row??). If random user clicks Two I want to get $("li:eq(1)")(as typed).
How can I get this result?
You can use jQuery.index. Something like this:
$('ul > li').click(function() {
alert($(this).index($(this).parent('li'));
});
You can get the text node value of the clicked item with:
$('li').click(function(){
var clicked = $(this).text();
alert(clicked+" was clicked");
});
$("#ulId li").click(function() {
$(this).something(); //the clicked li is $(this), and you can invoke functions on it.
})
If you give your elements an id such as
<ul id="mylist">
<li id="el_1">One</li>
<li id="el_2">Two</li>
<li id="el_3">Three</li>
<li id="el_4">Four</li>
<li id="el_5">Five</li>
</ul>
Then you can use $(this).attr(id) in the click handler to determine the id of the clicked element. This will also allow to give non sequential ids to your elements, and will detach what's written in the <li> from the actual value you get.
Also, you can encode multiple value in the id (for instance el_5_3) which can be useful sometimes.
$("#mylist li").click(function()
{
var id = $(this).attr("id").split("_");
alert("You clicked the element with id="+id[1]);
});
Working example:
http://jsfiddle.net/jFrdp/
Working example: http://jsfiddle.net/tbugV/1/
$("#mylist li").each(function(index)
{
$(this).data("row", index);
}).
click(function()
{
alert($(this).data("row"));
});
$('html').click(function() {
var el = e.target;
alert(el);
});
As people just keep posting code, and no explanations, I will try the other way around...
The click event handler is called in the scope of the clicked element, so you can use the this keyword to access the element. You can use $(this) to get a jQuery object that contains the clicked element, so that you can use jQuery methods on it.
Example:
$(document).ready(function(){
$('ul li').click(function({
var text = $(this).text();
alert('You clicked on the item with the text "' + text + '"');
}));
});
$('li').click(function(){
alert($(this).html());
});
This code will alert one when user will click the one button.
My DOM looks something like this:
<li>
<li><a class="editEntity>Edit</a></li>
<li><a class="deleteEntity>Delete</a></li>
</li>
When the used clicks on 'Edit', I want to change the outer <li> to <li class="selected>.
I tried something like this, but this is not working:
$('li a.editEntity').live('click', function() {
$(this).closest('li').closest('li').addClass('selected');
});
Any help is appreciated.
Go up a parent:
$(this).closest('li').parent().closest('li').addClass('selected');
It wasn't working because closest starts with the current element, and so if you call it on something that matches the selector, you get back the same thing you started with.
Live example
Or you can use parents with the :eq selector:
$(this).parents("li:eq(1)").toggleClass("selected");
Note that :eq uses 0-based indexes, so :eq(1) is the second parent li.
Live example
Your quoted HTML is invalid, though (an li can't directly contain an li); I assume you meant:
<li>
<ul>
<li><a class="editEntity>Edit</a></li>
<li><a class="deleteEntity>Delete</a></li>
</ul>
</li>
...or similar.
you can use
$('li a.editEntity').live('click', function() {
$(this).parents('li').addClass('selected');
});
following my previous comment.. here's the example promised... :)
$('li').each(function(index) {
alert(index + ': ' + $(this).text());
});
Stop at the second index
Further info can be found here
http://api.jquery.com/each/
I'm using this code to add active class depending on the page. This is working 100% for multi level sub-menus of AdminLTE 3, just put this code in the footer section of your page.
var url = window.location;
const allLinks = document.querySelectorAll('.nav-item a');
const currentLink = [...allLinks].filter(e => {
return e.href == url;
});
currentLink[0].classList.add("active");
currentLink[0].closest(".nav-treeview").style.display = "block ";
currentLink[0].closest("ul.nav-treeview").closest('li').classList.add('menu-open');
$('.menu-open').find('a').each(function() {
if (!$(this).parents().hasClass('active')) {
$(this).parents().addClass("active");
$(this).addClass("active");
}
});