Jquery: Select a href link and navigate with 'each' method - javascript

Is it possible using jQuery to select one full link that is in others 'tags'?
I would like select each href link of each item (<li>)..
My idea is to use the method each and then extract the link, for use to navigate then.
This is the part of the code of the page: http://pastebin.com/3Vjib4UR
Where in full code of page, there more <li> items in the <ul> tag.
P.S: I would like use the script in an external plugin of firefox (Greasemonkey),and not direct in the page.
Thanks in advance.
Kind regards.

Or shorter:
var links = $('a').map(function(){ return this.href;}).get();
If you want to get only certain links, just adjust the selector, e.g.
$('ul li a')
You really should learn how selectors works in order to use jQuery efficiently.

Like this?
var arr = new Array();
$("a").each(function(){ arr.push($(this).attr("href"); });

Related

How do I open a link with a specific class within a jQuery method

I'm trying to make 2 plugins work together on a wordpress site. One is a sidepanel plugin that can be triggered by adding class="nks_cc_trigger_element"
to html <a href="..."> link coding.
The other plugin is an image mapping plugin that will only let me set the URL of a link, and I need the class attribute set to have it trigger the sidebar by clicking one of the mapped shapes of the image. The developers pointed me to the API with this code
$.imageMapProEventClickedShape = function(imageMapName, shapeID) {}
I have no experience with jQuery, and this seems like it should be a simple solution, but I'm lost. The relevant imageMapName and shapeID are simple enough to find, but I don't know how to simply open a link with jQuery or append that link with a class attribute.
Any help is appreciated!
http://jsbin.com/pirajo/6/edit?js,output
let a = document.querySelector("a");
if( a.classList.contains("hasClass") ){
a.addEventListener("click",function(e){
let link = this.getAttribute("href");
window.open(link,"_blank");
e.preventDefault();
});
}

jQuery function .prepend() don't work with wordpress nav menu item

I have a menu in Wordpress and I want to hook up Appointlet script to it. The code is here:
(function(e,t,n,r)
{
if(e)return;
t._appt=true;
var i=n.createElement(r),s=n.getElementsByTagName(r)[0];
i.async=true;i.src='//dje0x8zlxc38k.cloudfront.net/loaders/s-min.js';
s.parentNode.insertBefore(i,s)
})
(window._appt,window,document,"script")
<div data-appointlet="tfracine">
</div>
My idea is to create menu item with blank name, get its id (for example, "#menu-item-66"). Then add my code in front of it using jQuery function.prepend().
So I created custom js file, included it in the header.php file and the code inside the file was this:
$(document).ready(function(){
$( "#menu-item-66" ).prepend( "Test" );
});
I started with the word "Test" to figure out if it works.
Unfortunately, nothing happened and I have lack of skills to figure out why. Any suggestions or smarter way to do it?
The jQuery .prepend() function will prepend a jQuery element, not a string.
So, you have to create a jQuery element by doing:
var newElement = $('<p>New Element</p>');
In your case, what you could do is:
$(document).ready(function(){
$('#menu-item-66').prepend($('<p>This is a jQuery element</p>');
});
For a complete reference, check the .prepend() documentation out.
.prepend() and .prependTo() adds the specified content as the first child.
The question is bit not clear. Do you want to insert your script inside your
div ?

How to add url link from jquery through css element?

Here is the code:
<span class='maincaptionsmall'>
Test
</span>
For some reasons of ajax and jquery codes in my page, I can't use HREF as Link, I mean, I can't use something like this following code:
<span class='maincaptionsmall'>Test</span>
So, How can i use jquery to get this css element maincaptionsmall and it will set it to href link ?
Even I can't use <div> too, I should use everything as <span>
Please give me an example that how to use jquery to set css element as href link.
Thanks in advance
CSS is not capable of doing such things. But JavaScript is! To change the href of an element first obtain the element:
var e = document.getElementById("elementid")
or
var e = document.getElementByClassName("elementclass")
Here are the basics on JavaScript selectors.
And then we can change the href property like so:
e.setAttribute("href", "http://google.com")
Good Luck!
You can open using JS/JQuery and CSS
Jquery has short simple code and is too fast too so I prefer that:-
Here is the Code :-
HTML
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
//Remember to add JQUERY on your page to make any jquery code work
<div id="example">Click Here</div>
JS
//UPDATED CODE:-
$(document).ready(function() {
$("#example").click(function () {
alert("K");
window.open('http://www.google.com/');
});
});
the Issue was that the function I gave you should be added under "$(document).ready(function(){"
Reg, "DIV or SPAN" u can use any tag, but give ID to that and whatever ID you are giving, mention the same in jQuery code too!
And Reg, JQUERY being called, please check on your page is there any other MAIN Jquery file being called? if there is already some other Jquery being called then this one is not required.
Please Check the updated Fiddle for your reference: http://jsfiddle.net/aasthatuteja/aPbje/
Let me know if this resolves you issue.
Enjoy!

Putting a span with an image before the text of a list item

I have an HTML structure that looks like this:
<li class="thing">Something</li>
My goal is to put a span that looks like this in front of the link tag:
<span class="my-span"></span>
What's the best way to go about doing this? Is it a CSS :before or a jQuery/Zepto .before method? Also, proper syntax as to how to do this would be helpful. I've been struggling with this.
Thanks!
$('<span class="my-span"></span>').insertBefore('.my-link');
Check more details from .insertBefore
If you need that <span> to be generated dynamically you may go for Jquery .before()
You may find for information in the following link with exaples
http://api.jquery.com/before/
Here's how to do it with Javascript. (Tried on FireBug for Firefox)
a = document.getElementsByClassName("my-link")
//Now a[0] will have your first link
b = document.createElement("span") //Your new span element
b.setAttribute("class","my-span")
a[0].parentElement.insertBefore(b,a[0])
Does this help? Or did you want to do it in jQuery?
Information source here.

Prefixing a URL in an window.open function jQuery

I have this HTML:
Track Your Package »
Somebody on this site was able to provide me with a script to prefix the URL with the domain http://www.example.com/ Here's the script:
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://www.example.com/"));
});
However, I am having a little trouble with this:
The first issue is where there is multiple instances of the element. Here's a fiddle: http://jsfiddle.net/VMmZx/
Instead of one anchor being signed with ID=4 and the other with ID=5 as intended, they're both being signed with ID=4.
The idea is, each window.open function should be prefixed with http://www.example.com however, the remainder of the URL should remain intact...
The second problem I'm encountering is when the element does not exist on a page, the remainder of the jQuery fails...
Here's another fiddle: http://jsfiddle.net/VPf32/
The <a> should get the class foo, but since the element does not exist on the page, the jQuery does not execute.
Since the JavaScript is being included in the HTML template of the ASP.NET server, this can create many problems.
I hope I've been clear and you can help me. Thanks.
You can use .each() to iterate over each matching element and change them individually:
$('a[onclick^="window.open(\'TrackPackage.asp"]').each(function(index, element) {
element = $(element);
element.attr('onclick', element.attr('onclick').replace(/open\('/, 'open(\'http://www.example.com/'));
});​
However, I don't think using links with a href of # and an onclick opening a window is as semantic as it could be. If possible, try changing the markup to this:
Track Your Package »
Now if someone is curious where it will lead them, the browser can show something useful in the status bar when you hover over it.
If you need to adjust the behavior further, add a class and bind for the click event. When they click, prevent the default action and open the window yourself, as you did before.
Why are you doing the click even inline like that? I would just output the links like:
Link Text
And then:
$('a[target=_blank]').click(function(){
var prefix = 'http://domain.com';
window.open(prefix + $(this).attr('href'));
});

Categories

Resources