magento two magento two - 1 month ago 9
HTML Question

Inserting image dynamically using jquery

Today I am trying to insert an image instead of

1 of
dynamically based on
span
class, but I can't.



$(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>





the above code is non-editable from our end, so we need to insert an image using jquery.

Any help on this?

Answer

You mean you wanted the results like this demo below?

$(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>