0

タイトルがはっきりしないのですが、どう表現したらいいのかわかりません。編集できない HTML を使用する e コマース サイトで作業しており、複数の製品を一覧表示するページに表示される各製品にリンクを追加しようとしています。1 つの製品ごとに 1 つのリンクを移動したいのですが、それぞれがその製品に固有のものです。私は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>

これは基本的に、3 つの製品の重要な情報を 1 行に表示しています。それぞれの上部にあるリンクを取得して、価格が表示されている場所の横に追加しようとしています. 最初の製品に関連する 2 つの行の周りにアスタリスクを追加しました。これらのアスタリスクはコードにはありません。

これを達成しようとしたjQueryは次のとおりです。

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

このコードは、すべての製品の価格の後に、ページ上のすべてのリンクを挿入しています。また、.pricecolor の最後に .first() を追加しようとしましたが、これはすべてのリンクを 1 つの製品に追加するだけです。ここで私が間違っていることについて、誰かが洞察や説明を持っていますか?

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 に答える