Solved

jquery adding parameter to hyperlink url

Posted on 2016-10-19
8
35 Views
Last Modified: 2016-10-20
Hi experts,

I'm using jQuery and html

I have this fiddle

http://jsfiddle.net/ees0hyxa/

When you run , it looks like this:
my fiddle
If you notice all the images are hyperlinks. If you click on any of them they all take you to www.google.com

Notice how in the table cell right above the divs there is a span containing a number in it.

How do i revise my fiddle so the hyperlink on each of the images uses the number in the span tag as the value to pass as a parameter as a query string in the url link.

So for example the hyperlink on the image underneath the 1 should go to:  
http://www.google.com?parameter1=1

the hyperlink on the image underneath the 2 should go to:
http://www.google.com?parameter1=2

the hyperlink on the image underneath the 3 should go to:
http://www.google.com?parameter1=3

the hyperlink on the image underneath the 4 should go to:
http://www.google.com?parameter1=4

and so on for all the other images..

Anyone know how I revise my fiddle so my hyperlink is setup like this?
0
Comment
Question by:maqskywalker
  • 4
  • 3
8 Comments
 
LVL 9

Assisted Solution

by:Karen
Karen earned 250 total points
ID: 41851490
$(document).ready(function() {
    $('.DivStyle1').each(function () {
        var myimage = $('<a href="http://www.google.com?parameter1=' + $(this).prev().text() + '"><img class="testclass" src="http://driveworks3d.com/img/b-ico-chrome-tiny-50x.png" /></a>');
        $(this).prepend(myimage);
    });
});

Open in new window

0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 41851502
$(function() {
  $('.DivStyle1').each(function() {
    var parameter = $(this).prev().text();
    var url = 'http://www.google.com?parameter=' + parameter;
    var img = $('<img/>', {
      src: 'http://driveworks3d.com/img/b-ico-chrome-tiny-50x.png',
      class: 'testclass'
    });
    var anchor = $('<a/>', {href: url}).append(img);
    $(this).append(anchor);
  });
});

Open in new window

0
 
LVL 1

Author Closing Comment

by:maqskywalker
ID: 41852017
thanks. great solutions.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41852039
You are welcome.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Author Comment

by:maqskywalker
ID: 41852258
Julian,

What are these two lines doing. More specifically the this part?

    var anchor = $('<a/>', {href: url}).append(img);
    $(this).append(anchor);
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41852365
jQuery allows you to create elements in different ways.

You can do as karen did and wrap the html in a jQuery call - which works and is nice and neat.
Alternatively you can create the elements one at a time and set their properties. There are debates around which one is best. I prefer the "in parts" approach as you can see what is going on and extend it without having to fiddle about in quoted strings.

LSS
var anchor = $('<a/>', {href: url}).append(img);

Open in new window

1. we are creating an <a> element $('<a/>')
2. we are using the object notation to set the attributes
$('<a/>', {href: url}) 

Open in new window

This is equivalent to
$('<a/>').attr('href', url)

Open in new window

which is equivalent to
$('<a/>').attr({href: url})

Open in new window

The above (whichever you use) returns a jQuery object encapsulating the <a>.

3. We append the <img> we created earlier
At this point we have a variable anchor which is an <a> element that contains an <img>

4. Finally we want to add the <a> to the document - currently it is an orphan without a parent so not part of the document. We do this by using the current element in the .each(). Remember the .each() is iterating over all elements with the class .DivStyle1 - $(this) refers to the element.DivStyle1 we are currently dealing with.  The code therefore appends the newly created <a> (with child <img>) to the current div.DivStyle1

$(this).append(anchor); 

Open in new window


Edit

.prepend() vs append()

The former adds the element to the parent so it is the first child. The latter adds it to the end of the parents children (last child) - in this case as the .DivStyle1 elements have no children the effect is the same
1
 
LVL 1

Author Comment

by:maqskywalker
ID: 41852426
Thanks Julian. Very informative. great stuff.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41852573
You are welcome.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now