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>
Related
I wonder if users click "test 1" will add class active in sidebar anchor and add background to expand list "#bar1".
the result should be sidebar font will red, and expand list background will red
But,what I found here if I click "test 1" it wont add class to anchor.
Please is there anyone can help me to correct my code
$(document).ready(function(){
$('.sidebar li a').click(function(e){
e.preventDefault();
$(this).addClass('active');
$(this).removeClass('active');
var exId=$(this).attr('href');
$(exId).addClass('expandBg');
$(exId).siblings().removeClass('expandBg')
})
});
a.active{
text-decoration: none;
color: #f00;
}
.expandBg{
background-color:#f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</div>
<div class="expand">
<ul>
<li id="bar1">bar1</li>
<li id="bar2">bar2</li>
<li id="bar3">bar3</li>
<li id="bar4">bar4</li>
</ul>
</div>
this line of code $(this).removeClass('active'); make an issue we want to remove active class from siblings anchor tag please find below snippet to know how to do that
$(document).ready(function(){
$('.sidebar li a').click(function(e){
e.preventDefault();
debugger;
$(this).addClass('active');
$(this).parent().siblings().find("a").removeClass("active")
var exId=$(this).attr('href');
$(exId).addClass('expandBg');
$(exId).siblings().removeClass('expandBg')
})
});
a.active{
text-decoration: none;
color: #f00;
}
.expandBg{
background-color:#f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</div>
<div class="expand">
<ul>
<li id="bar1">bar1</li>
<li id="bar2">bar2</li>
<li id="bar3">bar3</li>
<li id="bar4">bar4</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
So I have two unordered lists, with the same amount of items in them. So let's assume items in unordered list #2 are all hidden. The only way to make them appear is if you click on the items in unordered list #1.
so basically
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li class="hide">item 1</li>
<li class="hide">item 2</li>
<li class="hide">item 3</li>
<li class="hide">item 4</li>
</ul>
Now the way I'm trying to accomplish this is using the index() method, but I'm not sure how to properly approach this code.
This is how I thought of it.
$('.list1').on('click', 'li', function() {
$('.list2 li').index($(this).index()).toggleClass('active');
});
so when you click on an line item in .list1, whatever the index of that line item is, is the index I want to target in .list2
the problem I'm having is that when I console log it, I'm getting weird index numbers. The first line item would show up as 2 rather than 0, and the index for the 2nd line item would be -1.
what am I doing wrong? a lot I'm sure.
thanks in advance guys!
Jquery .index() return index of selected element. You need to use :eq() selector or .eq() method to selecting element with index.
$('.list1').on('click', 'li', function() {
$('.list2 li').eq($(this).index()).toggleClass('active');
});
.hide { display: none; }
.active { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li class="hide">item 1</li>
<li class="hide">item 2</li>
<li class="hide">item 3</li>
<li class="hide">item 4</li>
</ul>
try this, this will work for you fine
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
/* in here we get the ul which the class name is list2 and get the li elements inside it and hide those first*/
ul.list2 li{
display: none;
}
</style>
<body>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("ul.list1 li").click(function(){
var theindex = $(this).index();//in here you get the index number of clicked li element inside list1 class
$("ul.list2 li").eq(theindex).slideToggle(500);//then in here, you show the same index li element in list2 , which we are hidden.
});
});
</script>
</html>
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();
}
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>