使用JQuery在HTML周围添加Spans

时间：2017-11-10 22:46:56

标签： jquery html css

我一直想要删除一些HTML中生成的不必要的冒号。我无法控制HTML的输出，只希望在有问题的冒号周围添加一个带有类的SPAN，以便我可以用CSS隐藏它们。 冒号出现在＆＃34; columnName＆＃34;的范围之间。和＆＃34; columnValue＆＃34;像这样 - 

<span id="columnName">Manufacturer Item</span>: <span id="columnValue">

我找到了一个我觉得有帮助的JQuery功能，但是没有任何运气...而且我确定我忽略了一些东西.. 

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&nbsp;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&nbsp;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>

提前感谢您对此的任何帮助....非常感谢。

＆＃13;
＆＃13; 
function removeStupidGridColons(){
$(div:contains(">: <")').html(function(index, oldHTML) {
    return oldHTML.replace(/(>: <)/g, '><span class="StupidColon">$&</span><');
});
}
$(document).ready(function(){


        removeStupidGridColons();
});
＆＃13; 
<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&nbsp;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&nbsp;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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您可以使用每个功能

   var item = $('.itemGridViewDetails');
       item.each(function(){
           var $string = $(this).html();
           $newString = $string.replace(/(>: <)/g, '><span class="StupidColon">:</span><');
        $(this).replaceWith($newString);
   });

答案 1 :(得分：0)

你可以试试这个：

＆＃13;
＆＃13; 
$(".itemGridViewDetails").contents().filter(function () {
     return this.nodeType === 3; 
}).wrap("<span class='red-text'></span>");
＆＃13; 
.red-text{
  color:red;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

JsFiddle：https://jsfiddle.net/cas5xgff/2/

以下是noteType的参考： https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType

相关问题
最新问题