$(this).find("a[href^='/']")
I'm particularly interested in knowing this part "a[href^='/']"
jQuery uses CSS selectors. a[^='/'] will select all <a> whose href attribute starts with / which are children of whatever the this is.
See it in action:
$("ul").each(function () {
$(this).find("a[href^='/']").addClass("selected");
});
.selected {
background-color: lime;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Will not be selected</li>
<li>Will be selected</li>
</ul>
<ul>
<li>Yep</li>
<li>Nope</li>
</ul>
jQuery documentation on starts with attribute selector: https://api.jquery.com/attribute-starts-with-selector/
More on attribute selectors: https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors
This particular code is CSS Attribute Selector to find <a> elements with an href attribute value that starts with a /.
More here: https://api.jquery.com/attribute-starts-with-selector/
It looks for a link to the href beginning with /.
Related
I want to remove a canonical tag from my website. It can't be removed directly from the website since the pages are created on the fly and there are hundreds of them.
I want to remove them via tag manager but don't know what JS code to write.
Can anyone help?
/*
Here you should select elements you need to remove.
With the querySelectorAll, you will select the elements you want to remove.
Assume that we want to remove li elements with .red class in this example.
liList is a nodeList. So you can use foreach for iterating.
*/
let liList = document.querySelectorAll('.red');
liList.forEach((currentLi) => {
currentLi.remove(); //Removing all selected li elements
});
<html>
<body>
<ul>
<li class="red">List1</li>
<p>Text1</p>
<li class="red">List2</li>
<p>Text2</p>
<li class="red">List3</li>
<p>Text3</p>
<li class="red">List4</li>
<p>Text4</p>
<li class="red">List5</li>
</ul>
</body>
</html>
What you need to do is to select the tags you want to remove with DOM operators. I leave a simple example here. All you have to do is make a querySelectorAll operation that suits your needs.
This question already has answers here:
Find element without class or id within element - jQuery
(6 answers)
Closed 1 year ago.
<div id="div-id"><ul><li><a target="_blank" href="www.google.com">google</a> </li></ul></div>
How to change the href through javascript(not through getElementById,as it is not mentioned in html) or jquery?
$("body").ready(function() {
$("ul li a").attr("href", "http://www.stackoverflow.com/")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> <li> <a target="_blank" href="www.google.com">google</a> </li> </ul>
This is a simple way of doing it, but right now it applies this to all Links because you have no selector(class or id)
To be more precise and make it work only for a particular anchor element
$("body").ready(function() {
$("ul >li >a:contains("google").attr("href", "http://www.stackoverflow.com/")
})
document.getElementById() is not the only way to find an element in the document. You can use fairly robust selectors with something like document.querySelector(). As an extremely simple example:
<ul>
<li>
<a target="_blank" href="www.google.com">google</a>
</li>
</ul>
<script type="text/javascript">
var element = document.querySelector('a');
element.href = 'http://example.com';
</script>
Since, in the given markup, the link being targeted is the only a element in the DOM, the simple selector 'a' will identify it. In a more complex document, you can use more complex selectors. For example:
document.querySelector('ul > li > a')
Or even:
document.querySelector('a[href="www.google.com"]')
Since you've also tagged the question with jQuery, you can use the same concept of selectors there as well. Something like:
$('a').attr('href', 'http://example.com');
or:
$('a[href="www.google.com"]').attr('href', 'http://example.com');
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
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/