• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 200
  • Last Modified:

jquery adding parameter to hyperlink url

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
maqskywalker
Asked:
maqskywalker
  • 4
  • 3
2 Solutions
 
KarenAnalyst programmerCommented:
$(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
 
Julian HansenCommented:
$(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
 
maqskywalkerAuthor Commented:
thanks. great solutions.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Julian HansenCommented:
You are welcome.
0
 
maqskywalkerAuthor Commented:
Julian,

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

    var anchor = $('<a/>', {href: url}).append(img);
    $(this).append(anchor);
0
 
Julian HansenCommented:
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
 
maqskywalkerAuthor Commented:
Thanks Julian. Very informative. great stuff.
0
 
Julian HansenCommented:
You are welcome.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now