How do I change the amount of text a nested <a> tag encompasses using jQuery?

Question

Hi,

What I'm trying to do is to take paragraph containing a link, e.g.:

<p>this is a <a href="#">link</a> to something</p>

... and modify it with jQuery so the link contains all the paragraph text, e.g.:

<p><a href="#">this is a link to something</a></p>

I can't seem to get my head around this at the mo.

Cheers, James

Answer 1

Remove everything from the p using 'empty' and then 'append' the href to the p.

Answer 2

Use text().
In your specific case:

$('p').each(
  function()
  {
     var $this = $(this);  //more than 1 reference, I store it in a variable
     var address = $this.find('a').attr('href');
     //$this.text() includes children elements' text
     $this.html('<a href="' + address + '">' + $this.text() + '</a>');
  }
);

Answer 3

You need to be able to select the paragragh and the anchor. So maybe if they had ids that would help.

 <p id="p">this is a <a id="a" href="http://www.google.com"&gt;link&lt;/a&gt; to something</p>

Then:

 var orig = $("#p").text();

var a = $('#a').text(orig);
$("#p").empty("");
$("#p").html(a);

Answer 4

$("p > a").each(function(el) {
  var parent = $(this).parent();
  var text = parent.text();

  parent.replaceWith("<a href="+$(this).attr('href')+">"+text+"</a>");
});

What this does, is go through all your anchor tags inside paragraphs, get the only the text part and replace the paragraphs (the parent var) with a new anchor tag containing the same href attribute and the extracted text.

Answer 5

Try this:

        $(function() {
            var link = $("<a href='#'></a>");
            var text = $("p a").parent().text();            

            $("p").replaceWith($(link).append(text));
        });