I want to change a specific value of li which doesn't have any id, how can I access this li and change it to another value.
in the following code, I want to change "Edit as Drop" to just "Edit" using jquery or javascript.
<ul class="tabs--primary nav nav-tabs">
<li class="active">View<span class="visually-hidden">(active tab)</span></li>
<li>Edit</li>
<li>Delete</li>
<li>Edit as Drop</li>
<li>Devel</li>
</ul>
You can try using jQuery's :contains() selector which selects all elements that contain the specified text:
$('ul li a:contains(Edit as Drop)').text('Edit');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs--primary nav nav-tabs">
<li class="active">View<span class="visually-hidden">(active tab)</span></li>
<li>Edit</li>
<li>Delete</li>
<li>Edit as Drop</li>
<li>Devel</li>
</ul>
You can use nth-child() for this problem, something like this:
$( ".nav-tabs li:nth-child(4) a" ).html( "Edit" );
i can feel the downvotes coming...but why not add an ID and use innerHTML to set the value to another <a>
Related
I am trying to get the value of very next element of the current/selected element for example here is the list
<ul>
<li class="abc selected">test </li>
<li class="abc">test1 </li>
<li class="abc">test2 </li>
</ul>
From the above code I am trying to get the value of "a" tag which is very next to the selected li, in above case I am try to get the value of a tag which is test1 and this "a" tag is within the very next li after the selected one.
I tried to use the jQuery below but its fetching the empty result. Any help
var linktext1= jQuery(".selected").next("li a").text();
alert (linktext1);
The selector string passed to .next will filter out the next element if it doesn't match the selector string. But the next element is a li, not an a, so .next('li a') won't work.
Use .next("li").find('a') instead:
var linktext1 = jQuery(".selected").next("li").find('a').text();
console.log(linktext1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="abc selected">test </li>
<li class="abc">test1 </li>
<li class="abc">test2 </li>
</ul>
In this particular situation, though, there's no need for a li selector to pass to .next, because what is .selected will be a li, so any of its siblings will also be lis:
var linktext1 = jQuery(".selected").next().find('a').text();
console.log(linktext1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="abc selected">test </li>
<li class="abc">test1 </li>
<li class="abc">test2 </li>
</ul>
I think you should remove "li a" and it works. Below is the code
var linktext1= jQuery(".selected").next().text();
alert (linktext1);
Here is the example jsfiddle
I have a markup for <ul> as below:
<ul>
<li class="">Insulated And Extruded</li>
<li class="">Grille Type Rolling</li>
<li class="active2">PVC High Speed Doors</li>
<li class="">Swinging doors</li>
</ul>
Here I want to check li has a class named active2, and if it does then I need to remove that class and need to add different class to that li.
This is how I tried it in jQuery:
if($('ul li').hasClass('active2')) {
$(this).removeClass('active2').addClass('active1');
}
But it doesn't work.
Can anybody help me to figure this out?
To use hasClass() you'd need to loop through all the li elements and check them individually.
However there's no need for hasClass() here at all as you can select the .active2 elements directly and call toggleClass() on them, like this:
$('ul li.active2').toggleClass('active2 active1');
.active1 { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="">Insulated And Extruded</li>
<li class="">Grille Type Rolling</li>
<li class="active2">PVC High Speed Doors</li>
<li class="">Swinging doors</li>
</ul>
You do not need hasClass(), You can simply do this :
$('ul li.active2').removeClass('active2').addClass('active1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="">Insulated And Extruded</li>
<li class="">Grille Type Rolling</li>
<li class="active2">PVC High Speed Doors</li>
<li class="">Swinging doors</li>
</ul>
I need to remove the selected class of an <a> and assign it the last <a> instead. Both are nested within individual <li> elements.
Here's an example of the code:
<ul class="tabs clearfix">
<li class="tab">Home</li>
<li class="tab">About</li>
<li class="tab">Profile</li>
<li class="tab">History</li>
<li class="tab">The Beginning of V-Cube</li>
</ul>
How can I achieve this using JavaScript/jQuery? Please advise.
EDIT:
Let's say I don't want to target the last tab specifically. Can the href be used as a selector instead?
EDIT #2:
Thank you so much everyone for the quick response. All your answers were spot on, wish I could mark them all as answers :)
To remove class from an element, use removeClass.
To get the last element, use :last selector or last(). To add new class to element use addClass
$('.selected').removeClass('selected');
$('.tabs li:last a').addClass('selected');
// OR
// $('.tabs li').last().children('a').addClass('selected');
.selected {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs clearfix">
<li class="tab">Home
</li>
<li class="tab">About
</li>
<li class="tab">Profile
</li>
<li class="tab">History
</li>
<li class="tab">The Beginning of V-Cube
</li>
</ul>
Update
Let's say I don't want to target the last tab specifically. Can the href be used as a selector instead?
$('.tabs a[href="#five"]').addClass('selected');
Try this.
$(".tabs li").first().find("a").removeClass("selected");
$(".tabs li").last().find("a").addClass("selected");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs clearfix">
<li class="tab">Home</li>
<li class="tab">About</li>
<li class="tab">Profile</li>
<li class="tab">History</li>
<li class="tab">The Beginning of V-Cube</li>
</ul>
Try this:
$(document).ready(function(){
var classname = $(".tabs li:first-child a").attr("class");
console.log(classname);
$(".tabs li:last-child a").addClass(classname);
$(".tabs li:first-child a").removeClass();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="tabs clearfix">
<li class="tab">Home</li>
<li class="tab">About</li>
<li class="tab">Profile</li>
<li class="tab">History</li>
<li class="tab">The Beginning of V-Cube</li>
</ul>
it is quite easy also in vanilla JS:
document.querySelector('.selected').classList.remove('selected');
document.querySelector('.tabs li:last a').classList.add('selected');
If you want to use an arbitrary a and select the attribute href then you should use this selector:
a[href="HREFVALUE"]
$('.clearfix').find('.selected').removeClass('selected');
$('.clearfix').find('li:last').find('a').addClass('selected');
$("a[href$='five']").addClass('bold');
.selected {
color: red
}
.bold {
font-weight: bold
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs clearfix">
<li class="tab">Home
</li>
<li class="tab">About
</li>
<li class="tab">Profile
</li>
<li class="tab">History
</li>
<li class="tab">The Beginning of V-Cube
</li>
</ul>
Just use .removeClass() and .addClass()
.removeClass()
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
.addClass()
Description: Adds the specified class(es) to each element in the set of matched elements.
Say I have:
<ul>
<li></li>
<li>
<div id="test"></div>
</li>
<li></li>
</ul>
Is there a way to tell from the div tag what number li tag it's in?
I.e. in the div there is a javascript function that returns 2 since it's inside the second li element.
I realise I could go:
get parent ul
check each li child until the div is found.
Is there a more elegant way to do this?
You can use different variations of jQuery index()
$('li').index( $('li:has(div)') );
or
$('li:has(div)').index();
demo
You could use jQuery .find(); something like :
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<div class="text">this is the div</div>
</li>
<li class="item-c">C</li>
<li class="item-iii">III</li>
</ul>
$("ul.level-1").find( "div" ).css( "background-color", "yellow" );
Depends what you need ...
You can use .index() to get the index of the li, since index is zero based add 1 to it to get 2
var $div = $('#test')
var index = $div.parent().index() + 1
I have an ul list similar to this:
<ul>
<li class="category">Category 1
<ul>
<li class="product alpha_a">A Product</li>
<li class="product alpha_b">B product</li>
</ul>
</li>
<li class="category">Category 2
<ul>
<li class="product alpha_a">Another Product</li>
<li class="product alpha_c">c product</li>
</ul>
</li>
</ul>
what I am trying to do is hide the li elements that are not of a selected alpha class. I have tried this (simplified here):
$(".alpha_a").addClass("alphaselected");
$(".product li:not(.alphaselected)").hide();
but it doesn't work. I have also tried (among many others):
$("#sitemap li:not(.alphaselected,.category)").hide();
which seems to hide everything.
Any ideas?
Thanks
Try this:
$(".alpha_a").addClass("alphaselected");
$(".product:not(.alphaselected)").hide();
fiddle link
it should be - the product class belongs to the li element so your descendant selector will not return any element
$("li.product:not(.alphaselected)").hide();
Demo: Fiddle
Use:
$(".alpha_a").addClass("alphaselected");
$("li.product:not(.alphaselected)").hide();