You can simplify your approach; it's not necessary to copy the
properties to the new link as you can just get them at runtime when
the link is clicked (you also don't need to iterate over all the
anchors):
$('<a href="/modalwindow.html"><img src="/images/button.jpg"/></
a>').click(function(){
var props = $(this).prev();
//do your modal stuff here using the above 'props' object
console.log( props.attr('href') + ', ' + props.text() );
return false;
}).insertAfter('a');
This will hit every anchor. If you want to target specific anchors
you'll have to make the selector more specific, e.g.:
.insertAfter('a:contains("Document"),a:contains("PDF"),a:contains
("WebSite")');
or you could use the href attribute with [href$=.doc], etc.
On Jun 15, 3:59 pm, keith2734 <keithkee...@gmail.com> wrote:
> I work on a portal website that has approximately 700 pages and
> several thousand links. Some of these links are to various documents
> (.doc, .pdf, .xls). I would like to use Jquery to dynamically find
> these links on a page when the pages load and add another link
> directly after it that can invoke a modal window. When the modal
> window opens I need to hold onto the values of the original link as it
> will be stored in a DB. So I think I will need the second link to
> contain the first links name and URL pattern as some sort of property
> that I can store. I am not sure the best way to accomplish this.
>
> For example:
>
> The original links would look like:
> <a href="testlink.doc">Document</href>
> <a href="testlink2.pdf">PDF</href>
> <a href="www.something.com">WebSite</href>
>
> After the JS dynamically updates the link it would look like:
>
> <a href="testlink.doc">Document</href><a href="/modalwindow.html"
> property1="testlink.doc" property2="Document"><img src="button.jpg"/></
> a>
>
> <a href="testlink2.pdf">PDFNAME</href><a href="/modalwindow.html"
> property1="testlink2.pdf" property2="PDFNAME"><img src="button.jpg"/></
> a>
>
> <a href="www.something.com">WebSite</href>
