每節添加多個鏈接變量變量

Question

標題不是很清楚，但我不確定如何對它進行標記。我正在使用不可編輯的HTML工作在電子商務網站上，並且正在嘗試向列出多個產品的頁面中顯示的每個產品添加其他鏈接。我想爲每個ONE產品移動一個鏈接，每個產品都有自己獨特的產品。我試圖通過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的末尾，但這只是將每個鏈接添加到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