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

Append multiple link-turned-variables once per section

本文关键字：一次 链接 变量 转换 个部      更新时间：2023-09-26

标题不是很清楚，但我不知道如何措辞。我正在开发一个具有不可编辑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 的末尾，但这只会将每个链接添加到一个产品。有没有人对我在这里做错了什么有任何见解或澄清？

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

   $('.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

相关文章：