If I have code like this inside my view page
<li>
<a class="selected" href="/">Some link</a>
</li>
how can I use jquery to find this element (with selected class) and append to it's parent li element some css class, result should be like this
<li class="some-class">
<a class="selected" href="/">Some link</a>
</li>
use:
$('.selected').parent().addClass('some-class')
or
$('.selected').closest('li').addClass('some-class')
Using Jquery you can use the parent function: https://api.jquery.com/parent/
https://api.jquery.com/parent/
$(".selected").parent().addClass("some-class")
You can use .parent()
$('.selected').parent().addClass('some-class')
or .closest()
$('.selected').closest('li').addClass('some-class')
You can get parent by jquery parent api doc:
https://api.jquery.com/parent/
try like this:
$(".selected").parent().addClass("some-class");
or
$(".selected").parent("li").addClass("some-class");
Demo : http://jsfiddle.net/qsDn5/50/
Related
I'm trying to make a sidebar menu for a dashboard. I want to implement this with .closest as it will fit with my code right. Here is a simple example of what I'm trying to do: https://jsfiddle.net/eu8kjzh4/10/
Why isn't the closest span's (and the only span in this case) text being replaced with a '-'? In my code, I have
$('.' + Key).closest( '.' + Key ).css("color", "#000");
This code works just fine, but the one in the jsfiddle does not.
closest traverses up the DOM and is used for nested elements.
In your markup, your div is not a descendant of your span, not even a sibling.
You have
1. To retrieve the previous sibling (the first li after the body)
2. And find the span inside the li
$(document).ready(function() {
$(".sub").prev().find('span').text('-');
});
Also, in your fiddle, you forgot to include jQuery.
Here is a working code : https://jsfiddle.net/qwc6pepr/1/
Incorrect function: .closest( selector ) Returns: jQuery
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
What you want is the prev which finds the first sibling prior to the element
$(document).ready(function() {
$('.sub').prev('li').find('span').text('-');
});
From jQuery documentation
Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements
Your span is neither a Parent Element of your div.sub in the DOM, nor matches with the $(".sub") rule.
The only way to make your jQuery code work with your HTML structure :
$("#plusMinus1").text("-");
Or modify your HTML structure to match with the .closest() method requierements
Fiddle
When you go to the parent you'll end up in the body. From there you can find the span.
$(document).ready(function() {
$(".sub").parent().find("span").text("-");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
<li>
<a class="selected" href="#" onclick="return false;">Dashboard 1 <span id="plusMinus1">+</span></a>
</li>
<div class="sub">
<ul>
<li><a id="s1" href="">Test A</a>
</li>
<li><a id="s2" href="">Test B</a>
</li>
<li><a id="s3" href="">Test C</a>
</li>
</ul>
</div>
</body>
I gave my link a an id where if I click the link, I want my javascript to adjust the background image. I made a js-fiddle of a simple version of what I want here:
https://jsfiddle.net/qp8d390b/
<body background="http://www.blueskiescareers.co.uk/wp-content/uploads/2014/05/blue-sky-clouds.jpg">
<li>
<a id = "attempt1" href="#top">SNOOPY1</a>
</li>
<li>
<a>SNOOPY2</a>
</li>
<li>
<a>SNOOPY2</a>
</li>
<div id= "#top">TOP PART </div>
</body>
$(document).ready(function() {
$("a[id='attempt1']").click(function(e) {
e.preventDefault();
alert('works');
document.body.background = "https://upload.wikimedia.org/wikipedia/commons/0/02/Fried_egg,_sunny_side_up.jpg";
});
});
I'm new to selecting with javascript. Any help would be appreciated!
try to use $("#attempt1")
use # to get any id in html
Firstly your HTML is invalid; li must be in either a ul or ol and all a elements must have either a name or href attribute.
Secondly, jQuery uses CSS rules, so to select by id is $('#attempt1').
Lastly, to change the background CSS property to an image the URL string should be wrapped in url(). Try this:
$(document).ready(function() {
$("#attempt1").click(function(e) {
e.preventDefault();
$('body').css('background', 'url("https://upload.wikimedia.org/wikipedia/commons/0/02/Fried_egg,_sunny_side_up.jpg")');
});
});
You can select it with :
$('#attempt1')
You should use id-selector in this case
https://api.jquery.com/id-selector/
$("#attempt1")
The selector you used which is attribute selector is more used in inputs than in links (a elements)
https://api.jquery.com/attribute-equals-selector/
You can find more info on jQuery selectors in
https://api.jquery.com/category/selectors/
Hope it helps
I am pretty new in JQuery and I have the following situation:
<!-- Bottone relativo ai progetti WIFI: -->
<a title="WIFI" href="javascript: void(0)" id="showWifi_${item.index}" class="showWifi">
<div class="news_box news_box_01 hvr-underline-from-center " style="margin-right: 50px;"></div>
</a>
I have the a tag having class="showWifi".
I have to use JQuery to select the first div element inside this a tag having class="showWifi".
I don't want set an id to this tag, but I want use the JQuery syntax to select the first div tag
How can I do this?
You can use first()
$('a.showWifi div').first().addClass('something')
You can also use :first pseudo-selector
$('a.showWifi div:first').addClass('something')
Note: first() is faster than :first(Thanks to #Zeratops). See: jQuery :first vs. .first()
You can use :first
Selects the first matched element.
$('a.showWifi > div:first')
Use .first()
$(".showWifi").find("div").first();
Working JSFIDDLE: http://jsfiddle.net/uamkvdkr/
I have the following code:
<li id="toto" class="jstree-leaf">
<ins class="jstree-icon2"> </ins>
<a class=""><ins class="jstree-icon2"> </ins>Story B</a>
</li>
I need to change the class of the <ins> tags for a specific <li>.
I need to access the <li> id and then change the class of all <ins> tags found inside it
I would appreciate it if someone could show me the right way to do that.
Thanks a lot..
You can add and remove classes for the ins tags like this, using jQuery:
$('#toto ins').removeClass('oldClass').addClass('newClass');
$("#toto ins").attr("class","className"); // all ins
$("#toto ins:eq(0)").attr("class","className"); // first ins
$("#toto ins").removeClass().addClass("yourClass")
$('#toto ins').attr('class', 'new-class');
You can also use toggleClass for this:
$("#toto ins").toggleClass("className");
I've a simple list and a form text-field:
<ul>
<li class="item">one</li>
<li class="item">two</li>
<li class="item">three</li>
<li class="item">four</li>
</ul>
<input id="field" type="text" />
When the user clicks on an <li> item, I want the string inside the li element to be assigned the value of the input field.
Something like:
$('.item').click( function(){
$('#field').val(/*put the string inside the li element just clicked*/);
});
So how do I get the string in the li element?
$('.item').click(function(){
$('#field').val($(this).html());
});
I'd personally suggest using a very similar suggestion to those already-posted, but with text() rather than html:
$('.item').click(
function(){
$('#field').val($(this).text());
});
It's a slim justification, but, as the docs note:
Unlike the .html() method, .text() can be used in both XML and HTML documents.
Otherwise they seem to be much the same.
Reference:
text();
.html() is what you're looking for. Please look it up in the API : http://api.jquery.com/html/
$('.item').click( function(){
$('#field').val($(this).html());
});
$('.item').click( function(){
$('#field').val($(this).html());
});