CODEWITHSUNDEEP
javascriptjquery
Internet man
Internet man

Reputation: 1155

Creating links for elements with a particular class with jQuery

How can I wrap every element belonging to a particular class with a link that is built from the text inside the div? What I mean is that I would like to turn:

<foo class="my-class>sometext</foo>

into

<a href="path/sometext" ><foo class="my-class>sometext</foo></a>

Url encoding characters would also be nice, but can be ignored for now if necessary.

EDIT: Just to clarify, the path depends on the text within the element

Upvotes: 0

Views: 135

Answers (5)

John Fisher
John Fisher

Reputation: 22717

This ought to do it:

$('foo.my-class').each(function() {
  var element = $(this);
  var text = element.html(); // or .text() or .val()
  element.wrap('<a href="path/' + text + '"></a>');
});

Upvotes: 0

TheVillageIdiot
TheVillageIdiot

Reputation: 40537

you can wrap them inside anchor element like this:

$(document).ready(function(){
    $(".my-class").each(function(){
           var hr="path/"+$(this).text();
           $(this).wrap("<a href='"+hr+"'></a>");
   });
});

if you are opening links in same page itself then easier way than modifying dom to wrap elements inside anchor is to define css for the elements so that they look like links then handle click event:

$(".my-class").click(function(){
     window.location.href="path/"+$(this).text();
});

Upvotes: 1

Russ Cam
Russ Cam

Reputation: 125538

$("foo.my-class").each(function(){
  var foo = $(this);
  foo.wrap("<a href='path/" + foo.Text() +"'>");
});

Upvotes: 0

Sampson
Sampson

Reputation: 268462

$(".my-class").each(function(){
  var thisText = $(this).text();
  $(this).wrap("<a></a>").attr("href","path/"+thisText);
});

Upvotes: 2

cletus
cletus

Reputation: 625387

Use jQuery.wrap() for the simple case:

$(".my-class").wrap("<a href='path/sometext'></a>");

To process text inside:

$(".my-class").each(function() {
  var txt = $(this).text();
  var link = $("<a></a>").attr("href", "path/" + txt);
  $(this).wrap(link[0]);
});

Upvotes: 2

Related Questions