jqueryを使用して画像を動的に挿入する

今日はの代わりにspanの画像を動的に挿入しようとしていますが、できません。jqueryを使用して画像を動的に挿入する

$(document).ready(function() { 
 

 
     var a_href = []; 
 

 
     $('.PageText_L720n > a').each(function(index){ 
 
      var test = $(this).attr('href').split('='); 
 
      a_href.push(test[1]); 
 
     }); 
 
     console.log(a_href); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table width="100%" border="0" cellspacing="1" cellpadding="5" align="center" class="colors_lines_light"> 
 
    <tbody> 
 
    <tr> 
 
     <td colspan="3" class="bgcolor3 colors_background3 colors_background3_text"><span class="PageText_L355n"><font size="3"><span style="color: #0066F5;"><b>My Orders</b></span></font></span></td> 
 
    </tr> 
 
    <tr class="colors_backgroundneutral"> 
 
     <td width="27%"><b><span class="PageText_L322n">Order date</span>: </b>10/18/2016<br> 
 
      <b><span class="PageText_L268n">Order#</span>:</b> 10018<br> 
 
      <b><span class="PageText_L321n">Shipping to</span>:</b> magento&nbsp;nav 
 
     </td> 
 
     <td width="55%"> 
 
      <table width="100%" cellpadding="0" cellspacing="1"> 
 
       <tbody> 
 
       <tr> 
 
        <td> <b><span class="PageText_L290n">Items Ordered</span>:</b> </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <ul style="margin:0;padding-left:15px;"> 
 
          <li> 
 
           <span class="PageText_L720n">1 of : 
 
            <a href="ProductDetails.asp?ProductCode=10021">Cadbury 5 Star Chocolate - 10.5 Grams 
 
            </a> 
 
           </span> 
 
          </li> 
 
         </ul> 
 
        </td> 
 

 
       </tr> 
 
       </tbody> 
 
      </table> 
 
     </td> 
 

 
    </tr> 
 
    <tr class="colors_backgroundneutral"> 
 
     <td width="27%"><b> 
 
      <span class="PageText_L322n">Order date</span>: </b> 
 
      10/17/2016<br> 
 
      <b><span class="PageText_L268n">Order#</span>:</b> 
 
      10015<br> 
 
      <b><span class="PageText_L321n">Shipping to</span>: 
 
      </b> magento&nbsp;nav 
 
     </td> 
 
     <td width="55%"> 
 
      <table width="100%" cellpadding="0" cellspacing="1"> 
 
       <tbody> 
 
       <tr> 
 
        <td> 
 
         <b><span class="PageText_L290n">Items Ordered</span>:</b> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <ul style="margin:0;padding-left:15px;"> 
 
          <li> 
 
           <span class="PageText_L720n">1 of : 
 
           <a href="ProductDetails.asp?ProductCode=10091">Galaxy Smooth Milk Chocolate - 19 Grams 
 
           </a> 
 
           </span> 
 
          </li> 
 
         </ul> 
 
        </td> 
 

 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <ul style="margin:0;padding-left:15px;"> 
 
          <li> 
 
           <span class="PageText_L720n">1 of : 
 
           <a href="ProductDetails.asp?ProductCode=10097-0001">Snickers Chocolate Bar - 25 Grams 
 
           </a> 
 
           </span> 
 
          </li> 
 
         </ul> 
 
        </td> 
 

 
       </tr> 
 
       </tbody> 
 
      </table> 
 
     </td> 
 

 
    </tr> 
 
    <tr class="colors_backgroundneutral"> 
 
     <td width="27%"><b><span class="PageText_L322n">Order date</span>: </b>10/17/2016<br> 
 
      <b><span class="PageText_L268n">Order#</span>:</b> 10014<br> 
 
      <b><span class="PageText_L321n">Shipping to</span>:</b> magento&nbsp;nav 
 
     </td> 
 
     <td width="55%"> 
 
      <table width="100%" cellpadding="0" cellspacing="1"> 
 
       <tbody> 
 
       <tr> 
 
        <td> <b><span class="PageText_L290n">Items Ordered</span>:</b> </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <ul style="margin:0;padding-left:15px;"> 
 
          <li> 
 
           <span class="PageText_L720n">1 of : 
 
           <a href="ProductDetails.asp?ProductCode=10021">Cadbury 5 Star Chocolate - 10.5 Grams 
 
           </a> 
 
           </span> 
 
          </li> 
 
         </ul> 
 
        </td> 
 

 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <ul style="margin:0;padding-left:15px;"> 
 
          <li> 
 
           <span class="PageText_L720n">1 of : 
 
           <a href="ProductDetails.asp?ProductCode=10044">Cadbury Bournville Raisin &amp; Nut - 31 Grams 
 
           </a> 
 
           </span></li> 
 
         </ul> 
 
        </td> 
 

 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <ul style="margin:0;padding-left:15px;"> 
 
          <li> 
 
           <span class="PageText_L720n">1 of : 
 
           <a href="ProductDetails.asp?ProductCode=10064">Cadbury Gems - 18.69 Grams 
 
           </a> 
 
           </span> 
 
          </li> 
 
         </ul> 
 
        </td> 
 

 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <ul style="margin:0;padding-left:15px;"> 
 
          <li> 
 
           <span class="PageText_L720n">1 of : 
 
           <a href="ProductDetails.asp?ProductCode=10054">Cadbury Perk Home Treats - 200 Grams 
 
           </a> 
 
           </span> 
 
          </li> 
 
         </ul> 
 
        </td> 
 

 
       </tr> 
 
       </tbody> 
 
      </table> 
 
     </td> 
 

 
    </tr> 
 
    <tr class="colors_backgroundneutral"> 
 
     <td width="27%"><b><span class="PageText_L322n">Order date</span>: </b>10/13/2016<br> 
 
      <b><span class="PageText_L268n">Order#</span>:</b> 10011<br> 
 
      <b><span class="PageText_L321n">Shipping to</span>:</b> magento&nbsp;nav 
 
     </td> 
 
     <td width="55%"> 
 
      <table width="100%" cellpadding="0" cellspacing="1"> 
 
       <tbody> 
 
       <tr> 
 
        <td> <b><span class="PageText_L290n">Items Ordered</span>:</b> </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <ul style="margin:0;padding-left:15px;"> 
 
          <li> 
 
           <span class="PageText_L720n">2 of : 
 
           <a href="ProductDetails.asp?ProductCode=10067">Candyman Eclairs - 290 Grams 
 
           </a> 
 
           </span></li> 
 
         </ul> 
 
        </td> 
 

 
       </tr> 
 
       </tbody> 
 
      </table> 
 
     </td> 
 

 
    </tr> 
 
    </tbody> 
 
</table>

上記のコードは、私たちの終わりから編集不可能であるので、我々はjqueryのを使用して画像を挿入する必要があります。

これに関する助力？

出典

2016-11-02 magento two

あなたはこのデモのような結果を下にしたかったのですか？完璧な作業

$(document).ready(function() { 
 

 
    var a_href = []; 
 

 
    $('.PageText_L720n > a').each(function(index) { 
 
     var $clone = $(this); // get a element 
 
     var $parent = $(this).parent(); // get parent span 
 
     var test = $(this).attr('href').split('='); // get prod id from href 
 
     a_href.push(test[1]); 
 
     
 
     // create image in this case 
 
     // img src = prod_id set src according to your product img location 
 
     var $img = $('<img>', { 
 
      src: test[1] // you can add extra img attributes here e.g. `alt` 
 
     }); 
 

 
\t \t // empty the parent span then append the image and link back 
 
     $parent.empty().append($img, $clone); 
 
    }); 
 
    console.log(a_href); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="100%" border="0" cellspacing="1" cellpadding="5" align="center" class="colors_lines_light"> 
 
    <tbody> 
 
     <tr> 
 
      <td colspan="3" class="bgcolor3 colors_background3 colors_background3_text"><span class="PageText_L355n"><font size="3"><span style="color: #0066F5;"><b>My Orders</b></span></font> 
 
       </span> 
 
      </td> 
 
     </tr> 
 
     <tr class="colors_backgroundneutral"> 
 
      <td width="27%"><b><span class="PageText_L322n">Order date</span>: </b>10/18/2016 
 
       <br> 
 
       <b><span class="PageText_L268n">Order#</span>:</b> 10018 
 
       <br> 
 
       <b><span class="PageText_L321n">Shipping to</span>:</b> magento&nbsp;nav 
 
      </td> 
 
      <td width="55%"> 
 
       <table width="100%" cellpadding="0" cellspacing="1"> 
 
        <tbody> 
 
         <tr> 
 
          <td> <b><span class="PageText_L290n">Items Ordered</span>:</b> </td> 
 
         </tr> 
 
         <tr> 
 
          <td> 
 
           <ul style="margin:0;padding-left:15px;"> 
 
            <li><span class="PageText_L720n">1 of : <a href="ProductDetails.asp?ProductCode=10021">Cadbury 5 Star Chocolate - 10.5 Grams</a> </span></li> 
 
           </ul> 
 
          </td> 
 

 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </td> 
 

 
     </tr> 
 
     <tr class="colors_backgroundneutral"> 
 
      <td width="27%"><b><span class="PageText_L322n">Order date</span>: </b>10/17/2016 
 
       <br> 
 
       <b><span class="PageText_L268n">Order#</span>:</b> 10015 
 
       <br> 
 
       <b><span class="PageText_L321n">Shipping to</span>:</b> magento&nbsp;nav 
 
      </td> 
 
      <td width="55%"> 
 
       <table width="100%" cellpadding="0" cellspacing="1"> 
 
        <tbody> 
 
         <tr> 
 
          <td> <b><span class="PageText_L290n">Items Ordered</span>:</b> </td> 
 
         </tr> 
 
         <tr> 
 
          <td> 
 
           <ul style="margin:0;padding-left:15px;"> 
 
            <li><span class="PageText_L720n">1 of : <a href="ProductDetails.asp?ProductCode=10091">Galaxy Smooth Milk Chocolate - 19 Grams</a> </span></li> 
 
           </ul> 
 
          </td> 
 

 
         </tr> 
 
         <tr> 
 
          <td> 
 
           <ul style="margin:0;padding-left:15px;"> 
 
            <li><span class="PageText_L720n">1 of : <a href="ProductDetails.asp?ProductCode=10097-0001">Snickers Chocolate Bar - 25 Grams</a> </span></li> 
 
           </ul> 
 
          </td> 
 

 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </td> 
 

 
     </tr> 
 
     <tr class="colors_backgroundneutral"> 
 
      <td width="27%"><b><span class="PageText_L322n">Order date</span>: </b>10/17/2016 
 
       <br> 
 
       <b><span class="PageText_L268n">Order#</span>:</b> 10014 
 
       <br> 
 
       <b><span class="PageText_L321n">Shipping to</span>:</b> magento&nbsp;nav 
 
      </td> 
 
      <td width="55%"> 
 
       <table width="100%" cellpadding="0" cellspacing="1"> 
 
        <tbody> 
 
         <tr> 
 
          <td> <b><span class="PageText_L290n">Items Ordered</span>:</b> </td> 
 
         </tr> 
 
         <tr> 
 
          <td> 
 
           <ul style="margin:0;padding-left:15px;"> 
 
            <li><span class="PageText_L720n">1 of : <a href="ProductDetails.asp?ProductCode=10021">Cadbury 5 Star Chocolate - 10.5 Grams</a> </span></li> 
 
           </ul> 
 
          </td> 
 

 
         </tr> 
 
         <tr> 
 
          <td> 
 
           <ul style="margin:0;padding-left:15px;"> 
 
            <li><span class="PageText_L720n">1 of : <a href="ProductDetails.asp?ProductCode=10044">Cadbury Bournville Raisin &amp; Nut - 31 Grams</a> </span></li> 
 
           </ul> 
 
          </td> 
 

 
         </tr> 
 
         <tr> 
 
          <td> 
 
           <ul style="margin:0;padding-left:15px;"> 
 
            <li><span class="PageText_L720n">1 of : <a href="ProductDetails.asp?ProductCode=10064">Cadbury Gems - 18.69 Grams</a> </span></li> 
 
           </ul> 
 
          </td> 
 

 
         </tr> 
 
         <tr> 
 
          <td> 
 
           <ul style="margin:0;padding-left:15px;"> 
 
            <li><span class="PageText_L720n">1 of : <a href="ProductDetails.asp?ProductCode=10054">Cadbury Perk Home Treats - 200 Grams</a> </span></li> 
 
           </ul> 
 
          </td> 
 

 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </td> 
 

 
     </tr> 
 
     <tr class="colors_backgroundneutral"> 
 
      <td width="27%"><b><span class="PageText_L322n">Order date</span>: </b>10/13/2016 
 
       <br> 
 
       <b><span class="PageText_L268n">Order#</span>:</b> 10011 
 
       <br> 
 
       <b><span class="PageText_L321n">Shipping to</span>:</b> magento&nbsp;nav 
 
      </td> 
 
      <td width="55%"> 
 
       <table width="100%" cellpadding="0" cellspacing="1"> 
 
        <tbody> 
 
         <tr> 
 
          <td> <b><span class="PageText_L290n">Items Ordered</span>:</b> </td> 
 
         </tr> 
 
         <tr> 
 
          <td> 
 
           <ul style="margin:0;padding-left:15px;"> 
 
            <li><span class="PageText_L720n">2 of : <a href="ProductDetails.asp?ProductCode=10067">Candyman Eclairs - 290 Grams</a> </span></li> 
 
           </ul> 
 
          </td> 
 

 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </td> 
 

 
     </tr> 
 
    </tbody> 
 
</table>

出典

2016-11-02 07:23:11 four

！おかげで仲間 –

問題はありません、喜んで助けました。 – four

'img'と' a'要素の間に '
'を追加することはできますか？ –

あなたのクラスのような各スパンで1つのクラスを作成してから、このように実行してください。 $（ 'yourclass'）css（ 'background-image'、 'url（' + imageUrl + '）'）;

出典

2016-11-02 07:22:04

jqueryを使用して画像を動的に挿入する

答えて

関連する問題