Trying to toggleClass the nearest #dropdown element using jQuery and I can't seem to find the ul. jQuery is loading fine and each element acknowledges the click.
HTML code is:
<li onclick="showDropDown()" class="filter-button">
Filter by <strong>Aread</strong> +
<ul id="dropdown" class="dropdown-content">
<li>Test 1</li>
<li>Test 3</li>
<li>Test 2</li>
</ul>
</li>
jQuery code is:
function showDropDown() {
jQuery(this).parents("li").find("ul").toggleClass('show');
}
dropdown ul is the child element of filter-button li. So you dont need to find the parent here
$(".filter-button").click(function() {
$(this).find("ul").toggleClass('show');
});
OR,
If you really need to use the inline method calling then you need to pass the current object as well,
<li onclick="showDropDown(this)" class="filter-button">
code,
function showDropDown(obj) {
jQuery(obj).find("ul").toggleClass('show');
}
If there are many UL elements as child and nextSibling, you have to write as below.
demo : https://jsfiddle.net/nigayo/Lo3yf31y/1/
[JavaScript]
$(".filter-button").click(function() {
$(this).find("ul:first").toggleClass('show');
$(this).next("ul:first").toggleClass('show');
});
[HTML]
<li class="filter-button">
Filter by <strong>Aread</strong> +
<ul id="dropdown" class="dropdown-content">
<li>Test 2</li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li>Test 2</li>
</ul>
</li>
<ul id="dropdown_next" class="dropdown-content">
<li>Test 2</li>
</ul>
<ul id="dropdown_next2" class="dropdown-content">
<li>Test 2</li>
</ul>
You were missing this object in the method call.
Refer the demo here.
Please find the code below:
HTML:
<ul>
<li onclick="showDropDown(this)" class="filter-button">
Filter by <strong>Aread</strong> +
<ul id="dropdown" class="dropdown-content">
<li>Test 1</li>
<li>Test 3</li>
<li>Test 2</li>
</ul>
</li>
</ul>
JS:
function showDropDown(obj) {
$(obj).find("ul").toggle();
}
Related
This question already has answers here:
How do I select all anchors with a specific href?
(7 answers)
Closed 4 years ago.
Heyo,
I'm currently trying to create a script that checks if one of the anchor-elements has a specific url. I've tryed this but it didn't work out for me at all. What am I missing?
var url = '/right_url';
if ($('a').attr('href') == url ) {
$(this).addClass('active');
}
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Test 1</li>
<li><a class="test" href="/right_url">Test 2</a></li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</nav>
To refer the specific element with this you have to loop through all the element so that you can check the attribute:
var url = '/right_url';
$('a').each(function(){
if ($(this).attr('href') == url ) {
$(this).addClass('active');
}
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Test 1</li>
<li><a class="test" href="/right_url">Test 2</a></li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</nav>
Though I think you do not need to use loop and use this to achieve what you want. You can simply use href attribute in the selector to add the class:
var url = '/right_url';
$(`a[href='${url}'`).addClass('active');
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Test 1</li>
<li><a class="test" href="/right_url">Test 2</a></li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</nav>
Try following
var url = 'right_url';
$('a[href='+url+']').addClass('active');
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Test 1</li>
<li><a class="test" href="right_url">Test 2</a></li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</nav>
I have this code. When I click on any li element then the first alert it shows its value, then show its parent then again that parent and so on. I just want to show the text of the clicked li element. How can I do that?
$('#container li').on('click', function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="xyz">
<li>Grand Parent 1</li>
<li>
<ul class="xyz">
<li>Parent 1</li>
<li>Parent 2
<ul class="xyz">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
</ul>
</div>
Your first issue is that you need to stop the proprgation of the event from the clicked li to the parent li elements. You can call stopPropagation on the passed event handler to do that.
Secondly, I assume you only want to retrieve the child text value of the li, not the text of it's descendants, in which case you would need to use contents()[0] to access it. Try this:
$('#container li').on('click', function(e) {
e.stopPropagation();
var text = $(this).contents()[0].nodeValue.trim();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="xyz">
<li>Grand Parent 1</li>
<li>
<ul class="xyz">
<li>Parent 1</li>
<li>
Parent 2
<ul class="xyz">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
</ul>
</div>
I have two seperate lists and each of the list should add class active. Here is my HTML:
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
CSS
.active {
color: red;
}
JavaSript
$(document).ready(function () {
$("[id^='list'] .item").first().addClass("active");
});
As you can see only the #list1's first item getting the active class. How can i achive give the both list's first item active class.
Here is the fiddle: https://jsfiddle.net/iCromwell/rkvzhebd/1/
Try looping over the parent, and then target first .item
$(document).ready(function () {
$("[id^='list']").each(function(){
$(this).find('.item').first().addClass("active");
});
});
Fiddle
You have to loop through the list, the way you are approaching it, the class objects are being stacked in one selection list, and the first() is setting class to the first one only:
$(document).ready(function () {
$("[id^='list']").each(function(){
$(this).find('.item').first().addClass("active");
})
});
https://jsfiddle.net/rkvzhebd/4/
You can use jQuery first-child filter, such as:
$("ul li:first-child").addClass("active");
:first or .first() looks for first element in the matched set. So, that is functioning correctly. While in your case you need to target all the first child elements in the matched parents.
Use :first-child pseudoselector instead:
$('[id^="list"] .item:first-child').addClass('active');
.active{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
first() filter your result and return only first element - so only one element is selected. Use :first-child pseudo selector to achieve result.
$(document).ready(function () {
$("[id^='list'] .item:first-child").addClass("active");
});
$(document).ready(function () {
$("[id^='list'] .item:first-child").addClass("active");
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
You can use $("[id^='list']").find('.item:first').addClass("active");
Explanation:
$("[id^='list']") will return a list of uls
Then in this list, you can search using .find. Since you only need first element, add :first selector
Add class to all elements fetched
$(document).ready(function() {
$("[id^='list']").find('.item:first').addClass("active");
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
Consider using this code below:
$(document).ready(function () {
$('[id^="list"]').each(function(){
$(this).find('.item').first().addClass('active');
});
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
You can use first-child selector on each ul instead of id^=list
$("ul li:first-child").addClass("active");
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
Use this:
$(document).ready(function () {
$("ul[id^='list'] :first-child").addClass("active");
});
Fiddle here:
https://jsfiddle.net/mxautp3L/
If you want to do it with javascript you can do it like this,
Here, we are selecting both the list ul tag $("[id^='list']") which returns an array of both list now we can iterate over the array using jquery each() tag which call the function sent in argument with the this attribute pointing to the each item in the array.
Now, we can add the class .active by simply doing $(this).find('item').first().addclass('active');
$(document).ready(function () {
$('[id^="list"]').each(function(){
$(this).find('.item').first().addClass('active');
});
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
link to fiddle
The whole thing can be done without javascript and using only css as follows
ul[id^='list'] :first-child {
color: red;
}
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
link to fiddle
I´m having a problem with a Submenu.
I can SHOW the submenu (when I click on the Menu or Li > Text). For example, Show submenu when I click on ONE
Also, close the other submenu if the person click on other Menu (Li > Text). For example, if the submenu of ONE is open and I click on Two, the submenu of One gets closed.
But I can´t toggle with my current code to open/close the submenu. For example, if I click on One it shows the Submenu. But I want that If I click again on One, close the Submenu.
Anyone can help me?
Here is my code
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".menu .expanded .menu ").hide();
$("li:has(ul)").click(function() {
$(".menu .expanded .menu ").hide();
$("ul", this).toggle('fast');
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>
Thanks a lot! I am new :D
I only removed one line :
$(".menu .expanded .menu ").hide();
You can check if its the expected behavior in my snippet
$(document).ready(function() {
var previousTarget = null;
$("ul", "li").toggle('fast');
$("li:has(ul)").click(function() {
$(".menu .expanded .menu").hide('fast');
if (this === previousTarget && $(this).children().css('display')!='none') {
$(this).children().hide('fast');
} else {
$(this).children().show('fast');
}
previousTarget = this;
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>
I`ve got a big list with the width of li 33%, so there are 3 columns.
computers monitors hi-fi
sex-toys pancakes scissors
In each of them there is UL hidden, which on click slideToggle.
JQuery
$('.subCategory > .parentleaf:has(ul) > .categoryicon').click(function() {
$(this).siblings('ul').slideToggle('fast');
});
The problem that dont slide as I want, they rebuld the list every time, like so
computers monitors hi-fi
[li]cars sex-toys pancakes
[li]dogs scissors
I want to slide them this way:
computers monitors hi-fi
[li]cars pancakes scissors
[li]dogs
sex-toys
How can I achieve this??
jsFiddle
jsFiddle 2 - in this case need the red bg color be for 3 columns
I added a clearer div between every three li
<ul class="subCategory">
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Cars</span>
<ul class="submenu">
<li>Car 1</li>
<li>Car 2</li>
<li>Car 3</li>
<li>Car 4</li>
</ul>
</li>
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Phones</span>
<ul class="submenu">
<li>Phone 1</li>
<li>Phone 2</li>
<li>Phone 3</li>
<li>Phone 4</li>
</ul>
</li>
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Guns</span>
<ul class="submenu">
<li>Gun 1</li>
<li>Gun 2</li>
<li>Gun 3</li>
<li>Gun 4</li>
</ul>
</li>
<div class="clearer"></div>
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Notebooks</span>
<ul class="submenu">
<li>Notebook 1</li>
<li>Notebook 2</li>
<li>Notebook 3</li>
<li>Notebook 4</li>
</ul>
</li>
CSS
.clearer
{
clear:both;
}
You can also get the index of the current clicked li and with some math add a clearer div on click and remove it when needed but there I think there is no need for this