使用jquery动态插入图像

时间:2016-11-02 07:10:17

标签: javascript jquery html

今天我尝试根据1 of类动态插入图片而不是span,但我不能。

$(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插入图像。

对此有何帮助?

2 个答案:

答案 0 :(得分:1)

在每个跨度上创建一个类,如你的类,然后像这样执行它将起作用 $(&#39; .yourclass&#39;)。css(&#39; background-image&#39;,&#39; url(&#39; + imageUrl +&#39;)&#39;);

答案 1 :(得分:1)

你的意思是你想要下面这个演示的结果?

$(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`
        });

		// 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>