I would like to find the class of the parent element of the child with .current.
var currentli = $('.nav').find('a.current').parent().attr('class');
console.log(currentli);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
but it always throws me undefined
NOTE: I don't know which a currently has .current which is why I have to use the .find() method.
Your code should already work, but it might be more reliable to access the property className instead:
jQuery(function($) {
console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
This will work:
var currentli = $($('.nav').find('a.current')).parent().attr('class');
console.log(currentli);
I'm simply transforming the found collection into a jQuery object again.
See fiddle: http://jsfiddle.net/RaphaelDDL/wnW4u/
Ps.: If more than one a has class="current", only the first one will be retrieved.
jQuery(function($) {
console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
Related
In my below code just the first #sort-item is sortable, others not. How can I solve it?
$('#sortable').sortable({
items:"#sort-item"
});
Html;
<ul id="sortable">
<li id="sort-item"></li>
<li id="sort-item"></li>
<li id="sort-item"></li>
<li id="sort-item"></li>
<li id="sort-item"></li>
</ul>
Edit:
I try;
$('#sortable').sortable({
items:"> #sort-item"
});
But steal not working
jsFiddle;
https://jsfiddle.net/seamqykd/1/
You cannot assign multiple items the same ID (https://www.w3schools.com/html/html_id.asp)
Use a class to select the items:
<ul id="sortable">
<li class="sort-item"></li>
<li class="sort-item"></li>
<li class="sort-item"></li>
<li class="sort-item"></li>
<li class="sort-item"></li>
</ul>
$('#sortable').sortable({
items:".sort-item"
});
or even better, use the element
$('#sortable').sortable({
items:"li"
});
First using id in multiple element is an html Sementic Error, Id's are used to be in one and only one html element ,
And here that's what causes the issue, just replace in the html your id by a class name and in your js code replace #sort-item by .sort-item see below working snippet :
$('#sortable').sortable({
items:".sort-item"
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable">
<li class="sort-item">aaa</li>
<li class="sort-item">bbb</li>
<li class="sort-item">ccc</li>
<li class="sort-item">ddd</li>
<li class="sort-item">eee</li>
</ul>
I'm struggling to understand how to get the last item in an each() loop. I asked a question last week on this topic, which can be seen here: .find() relationship with loops, each() and this keyword - .find() returning 4 when it should only be 2
The original requirement was to check a series of uls inside uls, and if there were more than 1 lists I need to add a class. Now - I need to build upon this code where if there are more than three lists inside a div, or it is the last ul in a series, I need to add a class to the last ul as well.
I did research on the topic and will be referencing this answer: Last element in .each() set
For reference, the first sample case is below:
$(function(e) {
var getMenuItems = $(".item");
getMenuItems.each(function( index ) {
if ($(this).find("ul.sub-menu").length > 0) {
$(this).addClass("red");
}
});
});
.red {background-color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item">
<ul class="sub-menu">
<li></li>
</ul>
</li>
<li class="item">
</li>
<li class="item">
<ul class="sub-menu">
<li></li>
</ul>
</li>
<li class="item">
</li>
</ul>
This code just checks if there are more than 1 lists inside a div and if there are add a class.
Now the next step is to not only add a class to the divs with more than 1 list but the last ul in the series irregardless of amount of lists. The answer Last element in .each() set suggests to simply cross reference index and see if you are at the last item.
The highest upvoted answer says to:
Check index against the length of the set and you're good to go:
That concept integrated into my sample looks like this:
$(function(e) {
var getMenuItems = $(".item");
var howManyListItems = getMenuItems.length;
getMenuItems.each(function( index ) {
if ($(this).find("ul.sub-menu").length > 0) {
$(this).addClass("red");
} else if (index == (howManyListItems.length - 1)) {
console.log($(this));
$(this).addClass("red");
}
});
});
.red {background-color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item">
<ul class="sub-menu">
<li></li>
</ul>
</li>
<li class="item">
</li>
<li class="item">
<ul class="sub-menu">
<li></li>
</ul>
</li>
<li class="item">
</li>
<li class="item">
</li>
<li class="item">
</li>
<li class="item">
</li>
</ul>
The expected/desired behavior is to add the red to the last item but sadly that does not happen.
As can be seen as a troubleshooting measure, console logging this into that conditional returns nothing. So is that not the last item of the array? How would you modify it/target it? What does that conditional represent? Since console logging does nothing, how does one go about troubleshooting this code?
How do you hit the last element in an each loop and modify it's DOM properties?
This is as easy as:
$(function(e) {
$(".sub-menu:last-of-type").last().addClass("red");
});
.red {background-color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item">
<ul class="sub-menu">
<li></li>
</ul>
</li>
<li class="item">
</li>
<li class="item">
<ul class="sub-menu">
<li></li>
</ul>
</li>
<li class="item">
</li>
<li class="item">
</li>
<li class="item">
</li>
<li class="item">
</li>
</ul>
As the title says is there a way I can clone two elements and store them in one variable instead of creating a separate variable. Tried using && to get both elements but didn't work
var menu = $('a[href$="/items"]').clone() && $('a[href$="/items"]').next().clone();
$('.footer .footer-menu').append(menu);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Item
<ul>
<li>item one</li>
</ul>
</li>
</ul>
<div class="footer">
this is a footer
<div class="footer-menu">
</div>
</div>
Here you go with an array solution https://jsfiddle.net/wrdp548d/
var menu = [];
menu.push($('a[href$="/items"]').clone());
menu.push($('a[href$="/items"]').next().clone());
$('.footer .footer-menu').append(menu);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Item
<ul>
<li>item one</li>
</ul>
</li>
</ul>
<div class="footer">
this is a footer
<div class="footer-menu">
</div>
</div>
Another way
var menu = [];
menu.push($('a[href$="/items"]').clone());
menu.push($('a[href$="/items"]').next().clone());
$.each(menu, function(i){
$('.footer .footer-menu').append(menu[i]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Item
<ul>
<li>item one</li>
</ul>
</li>
</ul>
<div class="footer">
this is a footer
<div class="footer-menu">
</div>
</div>
Here you go with an object solution https://jsfiddle.net/wrdp548d/1/
var menu = {
clone1: $('a[href$="/items"]').clone(),
clone2: $('a[href$="/items"]').next().clone()
};
for(var key in menu){
$('.footer .footer-menu').append(menu[key]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Item
<ul>
<li>item one</li>
</ul>
</li>
</ul>
<div class="footer">
this is a footer
<div class="footer-menu">
</div>
</div>
Hope this will help you.
A simple variable can only hold one value. If you need to hold more than one you either use an array or object.
Using array:
var clone1 = $('a[href$="/items"]').clone();
var clone2 = $('a[href$="/items"]').next().clone();
var menu = [clone1, clone2];
or object:
var clone1 = $('a[href$="/items"]').clone();
var clone2 = $('a[href$="/items"]').next().clone();
var menu = {'clone1': clone1, 'clone2': clone2};
Then you're going to have to access the values by looping thru it or directly accessing it via array index menu[0] or object properties menu.clone1 menu[clone1]
I'm trying to make a drop down menu and have it open sub menus on click and close them on click, but I cannot even get it to hide my submenu to start off with on a click.
Here is my JQuery code:
$(document).ready(function(){
$("#timeli").click(function(){
$("#timeUlSub").hide();
});});
And this is my html code that I am trying to get to hide/show
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
Am I doing something wrong on the jquery end? Because from what I have looked on here this should be working, but it's not.
Using toggle() may be more effective:
$("#timeli").click(function(){
$("#timeUlSub").toggle();
});
Example Fiddle
$(document).ready(function(){
$("#timeli").on('click', function()
{
$("#timeUlSub").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
#timeUlSub is part of the #timeli li. Move it outside the li. In addition, jquery .slideToggle() is a better method than .hide().
Check if you have Jquery linked.
Try this out for conditional usage :
$(document).ready(function(){
$("#timeli").on('click', function(){
if($("#timeUlSub").is(':hidden')){
$("#timeUlSub").show();
} else {
$("#timeUlSub").hide();
}
});
});
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
#timeUlSub{
display:none;
}
$(document).ready(function(){
$("#timeli").click(function(){
$("#timeUlSub").toggle();
});});
jsfiddle: http://jsfiddle.net/shellyjindal/rxb56emp/
how to add javascript function to a class of active ??
I do not understand completely about javascript.
if i click menu its like remove and add new class nav active.
<div id="sidebar">
<ul id="mainNav">
<li id="navDashboard" class="nav active">
<span class="icon-home"></span>
Beranda
</li>
<li id="navPages" class="nav">
<span class="icon-document-alt-stroke"></span>
Data Profil
<ul class="subNav">
<li>Peta Lokasi</li>
<li>Site Plan</li>
</ul>
</li>
You can use something like this:
$(selector).click(function(){
$(this).removeClass(your class)
.addClass('active');
});
You have to define the selector you want to do something.