Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jquery adding parameter to hyperlink url

Posted on 2016-10-19
8
Medium Priority
?
168 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 1000 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 60

Accepted Solution

by:
Julian Hansen earned 1000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 60

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 60

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 60

Expert Comment

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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

879 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