Question

I am having trouble appending a link to the innerhtml of an elements parent. The content of the link is contained within the element. I am coding this for a content managed site so the users can (and probably will) add random paragraph tags. I have tried to use jquery to formulate my solution but I seem to be missing something (probably glaringly obvious)

Heres the html:

<ul class="publications">
    <li>
        <span class="pub-image"><img src="image1.jpg" alt="image1" /></span>
        <span class="description">
            <p><a title="Report1" href="report1.htm">Report1</a></p>
        </span>
    </li>
    <li>
        <span class="pub-image"><img src="image2.jpg" alt="image2" /></span>
        <span class="description">
            <p><a title="Report2" href="report2.htm">Report2</a></p>
        </span>
    </li>
    <li>
        <span class="pub-image"><img src="image3.jpg" alt="image3" /></span>
        <span class="description">
            <p><a title="Report3" href="report3.htm">Report3</a></p>
        </span>
    </li>
</ul>

Ive tried this jquery to find the link inside the span class decription and wrap it around both span elements

$(document).ready(function(){
    $('.description').each(function() {
        var itemhref = $(this).find('a').attr("href");
        $(this).parent.html("<a href='"+itemhref+"'>" + $(this).parent.html() + "</a>");

    });
});

Can anyone help?

Answer 1

First $(this).parent will throw error as parent is not a function so you should call it like

$(this).parent()

Second, are you trying to add new paragraph or just anchor ?

If you are trying to append anchor you can do like this:

$(document).ready(function() {
    $('.description').each(function() {
        var itemhref = $(this).find('a').clone(true).removeAttr('title');
        $(this).parent().append(itemhref);
    });
  });