0

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

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

这是我尝试完成的 jQuery：

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

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

4

1 回答 1

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")); 
    });

小提琴

当您这样做时，$(".pricecolor")它会将相同的锚点插入所有pricecolor's

于 2013-09-26T17:58:35.380 回答