使用JQuery在超文本标记语言周围添加跨度
使用JQuery在超文本标记语言周围添加跨度
提问于 2017-11-11 06:46:56
我一直在尝试去掉在一组HTML中生成的一些不必要的冒号。我对HTML的输出没有任何控制，只希望在有问题的冒号周围添加一个跨度，这样我就可以用CSS隐藏它们。冒号出现在"columnName“和"columnValue”之间，如下所示-
<span id="columnName">Manufacturer Item</span>: <span id="columnValue">我找到了一个我认为会有帮助的JQuery函数，但在使用it...and时没有任何幸运，我确信我忽略了一些东西。
function removeStupidGridColons(){
$(div:contains(">: <")').html(function(index, oldHTML) {
return oldHTML.replace(/(>: <)/g, '><span class="StupidColon">$&</span><');
});
}
$(document).ready(function(){
removeStupidGridColons();
});最后，这里是HTML的完整剪辑.....
<div id="itemsListGridView">
<div class="itemGridView" style="width:24%; border-right: 1px solid #D7D7D7;"><div class="itemGridViewImg" style="height:212px;"><a href="#" onclick="viewDetails(itemDetailForm, 1948, 'EACH', '1', 1, '', '19571','','19571')"><img src="/storefrontCommerce/imageContent.do?contentKey=92fe3487-6484-4c86-942d-1a481d8f5ae6&size=GALLERY&fileName=19571.jpg" alt="19571"/></a></div><div id="itm_manufitem1948_EACH1" class="itemGridViewDetails"><span id="columnName">Manufacturer Item</span>: <span id="columnValue">19571</A></span></div><div id="itm_numlink1948_EACH1" class="itemGridViewDetails"><span id="columnName">Item Number Link</span>: <span id="columnValue"><A href="#" onclick="viewDetails(itemDetailForm, 1948, 'EACH', '1', 1, '', '19571','','19571')">19571</A></span></div><div id="calc_avail_dft1948_EACH1" class="itemGridViewDetails"><span id="columnName">Quantity Avail (Dft Whse)</span>: <span id="columnValue">33</span></div><div id="avail_calc_dft_flag1948_EACH1" class="itemGridViewDetails"><span id="columnName">Availability (Dft Whse)</span>: <span id="columnValue"><div class="InStockMsg">Stock</div></span></div><div id="itm_manufacturer1948_EACH1" class="itemGridViewDetails"><span id="columnName">Manufacturer</span>: <span id="columnValue">LA-CO</A></span></div><div id="calc_avail1948_EACH1" class="itemGridViewDetails"><span id="columnName">Company Available</span>: <span id="columnValue">90</span></div><div id="avail_calc_flag1948_EACH1" class="itemGridViewDetails"><span id="columnName">Availability Flag</span>: <span id="columnValue"><div class="InStockMsg">Stock</div></span></div><div id="itm_proddesc1948_EACH1" class="itemGridViewDetails"><span id="columnName">Description</span>: <span id="columnValue">Epoxy-Stik Multi-Purpose Epoxy Putty; Fixes Leaks In Pipes, Fittings, Sheet Metal and Ducts; 4 Oz Tube</span></div><div id="calc_price1948_EACH1" class="itemGridViewDetails"><span id="columnName">Sell Price</span>: <span id="columnValue">$8.40 EACH</span></div><div class="addToCartButton"></div><input type="button" class="button addToCartButton" onclick="ajaxcartAdd(itemDetailForm, '1948', 'EACH', '1', 1,'', true);" value="Add to Cart" /></div>
<div class="itemGridView" style="width:24%; border-right: 1px solid #D7D7D7;"><div class="itemGridViewImg" style="height:212px;"><a href="#" onclick="viewDetails(itemDetailForm, 979, 'EACH', '1', 1, '', '11575','','11575')"><img src="/storefrontCommerce/imageContent.do?contentKey=d80c7c33-aba6-483e-973c-06b7987ac1af&size=GALLERY&fileName=11575.jpg" alt="11575"/></a></div><div id="itm_manufitem979_EACH1" class="itemGridViewDetails"><span id="columnName">Manufacturer Item</span>: <span id="columnValue">11575</A></span></div><div id="itm_numlink979_EACH1" class="itemGridViewDetails"><span id="columnName">Item Number Link</span>: <span id="columnValue"><A href="#" onclick="viewDetails(itemDetailForm, 979, 'EACH', '1', 1, '', '11575','','11575')">11575</A></span></div><div id="calc_avail_dft979_EACH1" class="itemGridViewDetails"><span id="columnName">Quantity Avail (Dft Whse)</span>: <span id="columnValue">9</span></div><div id="avail_calc_dft_flag979_EACH1" class="itemGridViewDetails"><span id="columnName">Availability (Dft Whse)</span>: <span id="columnValue"><div class="InStockMsg">Stock</div></span></div><div id="itm_manufacturer979_EACH1" class="itemGridViewDetails"><span id="columnName">Manufacturer</span>: <span id="columnValue">LA-CO</A></span></div><div id="calc_avail979_EACH1" class="itemGridViewDetails"><span id="columnName">Company Available</span>: <span id="columnValue">44</span></div><div id="avail_calc_flag979_EACH1" class="itemGridViewDetails"><span id="columnName">Availability Flag</span>: <span id="columnValue"><div class="InStockMsg">Stock</div></span></div><div id="itm_proddesc979_EACH1" class="itemGridViewDetails"><span id="columnName">Description</span>: <span id="columnValue">Epoxy Sealer; Heat-Seal Stik; For Aluminum And Copper Repair; Premixed Epoxy; 3/8 Oz Tube</span></div><div id="calc_price979_EACH1" class="itemGridViewDetails"><span id="columnName">Sell Price</span>: <span id="columnValue">$13.64 EACH</span></div><div class="addToCartButton"></div><input type="button" class="button addToCartButton" onclick="ajaxcartAdd(itemDetailForm, '979', 'EACH', '1', 1,'', true);" value="Add to Cart" /></div>
</div> 提前感谢您在this....it上的任何帮助。
function removeStupidGridColons(){
$(div:contains(">: <")').html(function(index, oldHTML) {
return oldHTML.replace(/(>: <)/g, '><span class="StupidColon">$&</span><');
});
}
$(document).ready(function(){
removeStupidGridColons();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="itemsListGridView">
<div class="itemGridView" style="width:24%; border-right: 1px solid #D7D7D7;"><div class="itemGridViewImg" style="height:212px;"><a href="#" onclick="viewDetails(itemDetailForm, 1948, 'EACH', '1', 1, '', '19571','','19571')"><img src="/storefrontCommerce/imageContent.do?contentKey=92fe3487-6484-4c86-942d-1a481d8f5ae6&size=GALLERY&fileName=19571.jpg" alt="19571"/></a></div><div id="itm_manufitem1948_EACH1" class="itemGridViewDetails"><span id="columnName">Manufacturer Item</span>: <span id="columnValue">19571</A></span></div><div id="itm_numlink1948_EACH1" class="itemGridViewDetails"><span id="columnName">Item Number Link</span>: <span id="columnValue"><A href="#" onclick="viewDetails(itemDetailForm, 1948, 'EACH', '1', 1, '', '19571','','19571')">19571</A></span></div><div id="calc_avail_dft1948_EACH1" class="itemGridViewDetails"><span id="columnName">Quantity Avail (Dft Whse)</span>: <span id="columnValue">33</span></div><div id="avail_calc_dft_flag1948_EACH1" class="itemGridViewDetails"><span id="columnName">Availability (Dft Whse)</span>: <span id="columnValue"><div class="InStockMsg">Stock</div></span></div><div id="itm_manufacturer1948_EACH1" class="itemGridViewDetails"><span id="columnName">Manufacturer</span>: <span id="columnValue">LA-CO</A></span></div><div id="calc_avail1948_EACH1" class="itemGridViewDetails"><span id="columnName">Company Available</span>: <span id="columnValue">90</span></div><div id="avail_calc_flag1948_EACH1" class="itemGridViewDetails"><span id="columnName">Availability Flag</span>: <span id="columnValue"><div class="InStockMsg">Stock</div></span></div><div id="itm_proddesc1948_EACH1" class="itemGridViewDetails"><span id="columnName">Description</span>: <span id="columnValue">Epoxy-Stik Multi-Purpose Epoxy Putty; Fixes Leaks In Pipes, Fittings, Sheet Metal and Ducts; 4 Oz Tube</span></div><div id="calc_price1948_EACH1" class="itemGridViewDetails"><span id="columnName">Sell Price</span>: <span id="columnValue">$8.40 EACH</span></div><div class="addToCartButton"></div><input type="button" class="button addToCartButton" onclick="ajaxcartAdd(itemDetailForm, '1948', 'EACH', '1', 1,'', true);" value="Add to Cart" /></div>
<div class="itemGridView" style="width:24%; border-right: 1px solid #D7D7D7;"><div class="itemGridViewImg" style="height:212px;"><a href="#" onclick="viewDetails(itemDetailForm, 979, 'EACH', '1', 1, '', '11575','','11575')"><img src="/storefrontCommerce/imageContent.do?contentKey=d80c7c33-aba6-483e-973c-06b7987ac1af&size=GALLERY&fileName=11575.jpg" alt="11575"/></a></div><div id="itm_manufitem979_EACH1" class="itemGridViewDetails"><span id="columnName">Manufacturer Item</span>: <span id="columnValue">11575</A></span></div><div id="itm_numlink979_EACH1" class="itemGridViewDetails"><span id="columnName">Item Number Link</span>: <span id="columnValue"><A href="#" onclick="viewDetails(itemDetailForm, 979, 'EACH', '1', 1, '', '11575','','11575')">11575</A></span></div><div id="calc_avail_dft979_EACH1" class="itemGridViewDetails"><span id="columnName">Quantity Avail (Dft Whse)</span>: <span id="columnValue">9</span></div><div id="avail_calc_dft_flag979_EACH1" class="itemGridViewDetails"><span id="columnName">Availability (Dft Whse)</span>: <span id="columnValue"><div class="InStockMsg">Stock</div></span></div><div id="itm_manufacturer979_EACH1" class="itemGridViewDetails"><span id="columnName">Manufacturer</span>: <span id="columnValue">LA-CO</A></span></div><div id="calc_avail979_EACH1" class="itemGridViewDetails"><span id="columnName">Company Available</span>: <span id="columnValue">44</span></div><div id="avail_calc_flag979_EACH1" class="itemGridViewDetails"><span id="columnName">Availability Flag</span>: <span id="columnValue"><div class="InStockMsg">Stock</div></span></div><div id="itm_proddesc979_EACH1" class="itemGridViewDetails"><span id="columnName">Description</span>: <span id="columnValue">Epoxy Sealer; Heat-Seal Stik; For Aluminum And Copper Repair; Premixed Epoxy; 3/8 Oz Tube</span></div><div id="calc_price979_EACH1" class="itemGridViewDetails"><span id="columnName">Sell Price</span>: <span id="columnValue">$13.64 EACH</span></div><div class="addToCartButton"></div><input type="button" class="button addToCartButton" onclick="ajaxcartAdd(itemDetailForm, '979', 'EACH', '1', 1,'', true);" value="Add to Cart" /></div>
</div>
回答 2
Stack Overflow用户
发布于 2017-11-11 07:01:54
您可以使用each函数
var item = $('.itemGridViewDetails');
item.each(function(){
var $string = $(this).html();
$newString = $string.replace(/(>: <)/g, '><span class="StupidColon">:</span><');
$(this).replaceWith($newString);
});Stack Overflow用户
发布于 2017-11-11 08:41:17
您可以尝试这样做：
$(".itemGridViewDetails").contents().filter(function () {
return this.nodeType === 3;
}).wrap("<span class='red-text'></span>");.red-text{
color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="itm_manufitem1948_EACH1" class="itemGridViewDetails">
<span id="columnName">Manufacturer Item</span>: <span id="columnValue">A</span>
</div>
JsFiddle：https://jsfiddle.net/cas5xgff/2/
下面是对noteType的引用：https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47232294
复制相关文章
相似问题
腾讯云开发者
