Solved

jquery adding parameter to hyperlink url

Posted on 2016-10-19
8
95 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 57

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
Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

 
LVL 57

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 57

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 57

Expert Comment

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

Featured Post

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

751 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