今天我尝试根据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 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 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 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 & 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 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插入图像。
对此有何帮助?
答案 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 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 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 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 & 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 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>