Javascript issue. Need help with a loop and .append

Question

I a search result page. This search result page is a table. I can not change the html of the page. This is the html:

<table class="product-table">
    <tr>
        <td>
            <dl>
                <dt>
                    <h1>Item</h1>
                </dt>

                <dd class="title fn">
                    <a class="url" href="/product.jsp?id=EHS_FR_BS-PK-409674&amp;navAction=jump&amp;navCount=0">
                        Pratique de l'accouchement, 5ème Edition
                    </a>
                </dd>
            </dl>
        </td>
    </tr>
    <tr>
        <td>
            <dl>
                <dt>
                    <h1>Item</h1>
                </dt>

                <dd class="title fn">
                    <a class="url" href="/product.jsp?id=EHS_FR_BS-PK-409674&amp;navAction=jump&amp;navCount=0">
                        Pratique de l'accouchement, 5ème Edition
                    </a>
                </dd>
            </dl>
        </td>
    </tr>
</table>

My Question

But i want in the dd class title fn. A new element. This a element is a link to more information of the page. The element must get the href of the a class=url element.

I make this javascript:

 $("table.product-table .pricing").append('<a class="information" href="" title="plus d’information">plus d’information</a>');

But how can i fix this better. And how can i put the href of the class url in the new a element that i append.

Do you understand my question??

Thanks for helping!

Answer 1

$("dd.title.fn").each(function() {
    var $this = $(this);
    $this.append('<a class="information" href="' + $this.find(".url").attr("href") + '" title="plus d’information">plus d’information</a>');
});

Does this help you? Check out this link for more information on each method which might help you getting the url of each link you want to append.

http://api.jquery.com/jQuery.each/