3

私は非常に奇妙にコード化された e コマース ソリューションを使用している会社で働いています。その特定の会社によってホストされているため、e コマース ストアのコードに直接アクセスすることはできません。私はこのシステム全体を廃止したいと思いますが、クライアントはむしろそれに愛着を持っており、これが彼らの望みです。

ここに私が働かなければならないものがあります：

<tbody>
    <tr>
        <td class="Product">
            <div class="ProductWrapper">
                <a class="ProductThumb" href="#">
                    <img src="#" />
                </a>
                <a class="ProductName" href="#">Example</a>
                <meta itemprop="name" content="Example""="">
                <div class="Status">
                    <link href="#">
                    In Stock
                </div>
                <div class="Price">
                    <b>$0.00</b>
                    <meta itemprop="priceCurrency" content="USD">
                </div>
             </div>
         </td>
         <td class="ProductSpacer"><div></div></td>
         <td class="Product">
            <div class="ProductWrapper">
                <a class="ProductThumb" href="#">
                    <img src="#" />
                </a>
                <a class="ProductName" href="#">Example</a>
                <meta itemprop="name" content="Example""="">
                <div class="Status">
                    <link href="#">
                    In Stock
                </div>
                <div class="Price">
                    <b>$0.00</b>
                    <meta itemprop="priceCurrency" content="USD">
                </div>
             </div>
         </td>
    </tr>
</tbody>

より視覚的に魅力的な方法でコンテンツを整理しようとしているので、クライアントにはシステムに既にアップロードされているさまざまな高さの画像がたくさんあるため (1000 年代)、画像を下に垂直に揃えたいと思います。次に、商品名の一部が 1 行で、その他が複数行であるため、一定の高さを指定した後、テキストを上部に垂直に揃えます。ただし、これを行うには、コンテンツを独自の div に含める必要があります。いくつかの異なる jQuery ソリューションを試しましたが、うまくいきませんでした。

出力：

<tbody>
    <tr>
        <td class="Product">
            <div class="ProductWrapper">
                <a class="ProductThumb" href="#">
                    <img src="#" />
                </a>
                <div class="ProductInfo">
                    <a class="ProductName" href="#">Example</a>
                    <meta itemprop="name" content="Example""="">
                    <div class="Status">
                        <link href="#">
                        In Stock
                    </div>
                    <div class="Price">
                        <b>$0.00</b>
                        <meta itemprop="priceCurrency" content="USD">
                    </div>
                </div>
             </div>
         </td>
         <td class="ProductSpacer"><div></div></td>
         <td class="Product">
            <div class="ProductWrapper">
                <a class="ProductThumb" href="#">
                    <img src="#" />
                </a>
                <div class="ProductInfo">
                    <a class="ProductName" href="#">Example</a>
                    <meta itemprop="name" content="Example""="">
                    <div class="Status">
                        <link href="#">
                        In Stock
                    </div>
                    <div class="Price">
                        <b>$0.00</b>
                        <meta itemprop="priceCurrency" content="USD">
                    </div>
                </div>
             </div>
        </td>
    </tr>
</tbody>

私が得た最も近い解決策は次のとおりです。

$(".ProductThumb").nextUntil('td').wrapAll("<div class='ProductInfo'>");

ただし、このコードは、ページ上のすべての製品リストからすべての情報を削除し、最初のリストの下に配置します。また、html の head 内に jQuery を配置するためのアクセス権しかないことにも注意してください。

~~~~~~~~~~~~~

[編集1:]コードの表示を修正しました。また、いくつかのことを明確にしたいと思います。

まず、コードの最後の行 " は、以前の TD の複製であることを表しているはずです。明確にしておらず申し訳ありません。

次に、HTML を編集することはできません。

最後に、TD のデータを分割しようとしています。まず、画像を保持するアンカータグ。次に、残りのデータ (名前、在庫、価格など) を div.

そう：

<a class="ProductThumb"> ... </a>
<div class="ProductInfo"> ... </div>

また、助けてくれて迅速な対応をしてくれたすべての人に感謝します。

4

2 に答える 2

1

これを試して

HTML

<table>
<tbody>
    <tr>
        <td class="Product">
            <div class="ProductWrapper">
                <a class="ProductThumb" href="#">
                    <img src="#" />
                </a>
                <a class="ProductName" href="#">Example</a>
                <meta itemprop="name" content="Example""="">
                <div class="Status">
                    <link href="#">
                    In Stock
            </div>
                <div class="Price">
                    <b>$0.00</b>
                    <meta itemprop="priceCurrency" content="USD">
            </div>
         </td>
         <td class="ProductSpacer"><div></div></td>
         <td class="Product"></td>
</tr>
</tbody>
</table>

JS コード

$(".ProductThumb").siblings('.Price').wrapAll("<div class='ALLNEW' />");

ライブデモ

于 2013-01-23T20:09:59.447 に答える
1

そのようにしてみてください: セレクターの内容をラップします:

$(".ProductThumb").parent().wrapinner("<div class='ALLNEW'>");

またはさらに簡単です：

$(".ProductWrapper").wrapinner("<div class='ALLNEW'>");

編集: すべてのアンカー タグとイメージ タグを除外する場合は、:not()フィルターを使用してロジックを少し変更できます。

$(".ProductWrapper").children(":not(a, img)").wrapAll("<div class='ALLNEW'>");
于 2013-01-23T20:10:42.190 に答える