Solved

jquery adding parameter to hyperlink url

Posted on 2016-10-19
8
58 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 54

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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41852039
You are welcome.
0
 
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 54

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 54

Expert Comment

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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Input box gone wrong 8 24
Html test in IIS 4 20
jQuery slideToggle working incorrectly 3 24
Button and js nou working 3 7
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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…

773 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