Question

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

Answer 1

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]);
});