Javascript 每个节追加一次多个链接变量

标题不是很清楚，但我不知道该如何表达。我正在一个电子商务网站上使用不可编辑的HTML，我正在尝试添加一个附加的链接到每个产品，这些产品显示在一个列出多个产品的页面中。我想为每个产品移动一个链接，每个链接都是它自己的产品所独有的。我正试图通过jQuery实现这一点。以下是相关的HTML：

<tr>
    <td valign="top" width="33%">
        <div>
            **<a href="http://www.site.com/Prodcut1.htm" class="productnamecolor colors_productname" title="Product 1">**
            <span itemprop='name'>
            Product 1 </span>
            </a>
            <br/>
            <div>
                <div>
                    **<b><font class="pricecolor colors_productprice"><span class="PageText_L483n">$16.00</span></font></b>**
                </div>
                <img src="Shipping_Small.gif">
            </div>
        </td>
    </td>
    <td valign="top" width="33%">
        <div>
            <a href="http://www.site.com/Product2.htm" class="productnamecolor colors_productname" title="Product 2">
            <span itemprop='name'>
            Product 2 </span>
            </a>
            <br/>
            <div>
                <div>
                    <b><font class="pricecolor colors_productprice"><span class="PageText_L483n">$9.00</span></font></b>
                </div>
                <img src="Shipping_Small.gif">
            </div>
        </td>
    </td>
    <td valign="top" width="33%">
        <div>
            <a href="http://www.site.com/Product3.htm" class="productnamecolor colors_productname" title="Product 3">
            <span itemprop='name'>
            Product 3 </span>
            </a>
            <br/>
            <div>
                <div>
                    <b><font class="pricecolor colors_productprice"><span class="PageText_L483n">$8.00</span></font></b>
                </div>
                <img src="Shipping_Small.gif">
            </div>
        </td>
    </td>
</tr>

**


**$16.00**


$9.00


$8.00

这实质上是显示一行三种产品的基本信息。我试图采取在每个顶部的链接，并附加到旁边的价格显示。我在第一个产品的两个相关行周围添加了星号。这些星号在代码中是而不是

以下是我尝试实现的jQuery：

$(function() {
     $('.productnamecolor').each(function() {
          var clicky = $(this).attr('href');
          $("<a href='" + clicky + "'>click here</a>").insertAfter($(".pricecolor"));
     });
});

$（函数（）{
$（'.productnamecolor'）。每个（函数（）{
var clicky=$（this.attr（'href'）；
$（“”）.insertAfter（$（“.pricecolor”）；
});
});

---

此代码在每个产品的价格之后插入页面上的每个链接。我还尝试将.first（）添加到.pricecolor的末尾，但这只是将每个链接添加到一个产品。是否有人对我在这里做错了什么有任何见解或澄清？

您需要针对特定元素。尝试：

   $('.productnamecolor').each(function () {
        var $anchor = $('<a/>', { //construct anchor
            href:this.href,   //get href of current item
            text: "click here"});
        //now target to insert only to the pricecolor of its own
        $anchor.insertAfter($(this).closest('td').find(".pricecolor")); 
    });

$（'.productnamecolor'）。每个（函数（）{
var$anchor=$（'

当您只需执行
$（“.pricecolor”）时
它将相同的锚插入到所有的
pricecolor的
这非常有效。但有一个问题：构造函数到底是如何工作的？具体来说，它如何知道如何关闭标记，以及为什么在结尾处是/呢？@user1925805我建议总是更喜欢使用构造函数而不是字符串concat来创建元素。我不是hink你可以使用或不使用为锚，检查底部部分的这一点