Question

标题不是很清楚，但我不确定如何表达它。我正在开发一个包含不可编辑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>

这基本上显示了一排三种产品的基本信息。我试图将链接放在每个顶部并将其附加到价格显示的位置旁边。我已在第一个产品的两个相关行周围添加了星号。这些星号在代码中 NOT 。

这是我试图完成的jQuery：

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

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

Answer 1

您需要定位特定元素。尝试：

   $('.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")); 
    });

<强> Fiddle

当您执行$(".pricecolor")时，它会向所有pricecolor's

插入相同的锚点

每个部分附加一次链接转换变量

1 个答案: