修剪CSS类的第一个和最后一个字符

Question

I have a css class .clsCatOffCount that happens multiple times on a site. It is generated as a number with parenthesis around it.

example: (20)

I am trying to remove the parenthesis from the generated number.

I am using the below however it removes the parenthesis, but it changes all the values to the same number after removing the parenthesis.

<script language="JavaScript" type="text/javascript">
$('span.clsCatOffCount').html($('span.clsCatOffCount').html().replace('(',''))
$('span.clsCatOffCount').html($('span.clsCatOffCount').html().replace(')',''))
</script>

Here is the html generated and there is another class I may be able to use that is unique clsCatTree[id^="CatImg"] .

<div id="SbCatMenu" class="__web-inspector-hide-shortcut__">
<dl id="dlCatLvl1" class="clsCatLvl1 clsOffCat1">
<dd class="clsCatTree1 clsCTree1" id="CatImg1"><a href="../OeCart/OeFrame.asp?PmSess1=1182517&amp;SXREF=1">Backdrop<span class="clsCatOffCount"> (2)</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg2"><a href="../OeCart/OeFrame.asp?PmSess1=1182517&amp;SXREF=2">Banner Stands<span class="clsCatOffCount"> (12)</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg3"><a href="../OeCart/OeFrame.asp?PmSess1=1182517&amp;SXREF=3">Data Sheet<span class="clsCatOffCount"> (16)</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg4"><a href="../OeCart/OeFrame.asp?PmSess1=1182517&amp;SXREF=4">Giveaways<span class="clsCatOffCount"> (9)</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg5"><a href="../OeCart/OeFrame.asp?PmSess1=1182517&amp;SXREF=5">Table Top<span class="clsCatOffCount"> (0)</span></a></dd>
</dl>

</div>

Answer 1

I would do a loop...

$('span.clsCatOffCount').each(function () {
    $(this).html($(this).html().replace('(', '').replace(')', ''));
});

Answer 2

It's the same because you're using the html of the first element with that class, you should loop throught them and replace like :

 $('span.clsCatOffCount').each((i,e) => { var newHtml = $(e).html().replace(/\\((\\w+)\\)/g, '$1'); $(e).html(newHtml) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="SbCatMenu" class="__web-inspector-hide-shortcut__"> <dl id="dlCatLvl1" class="clsCatLvl1 clsOffCat1"> <dd class="clsCatTree1 clsCTree1" id="CatImg1"><a href="../OeCart/OeFrame.asp?PmSess1=1182517&amp;SXREF=1">Backdrop<span class="clsCatOffCount"> (2)</span></a></dd> <dd class="clsCatTree1 clsCTree1" id="CatImg2"><a href="../OeCart/OeFrame.asp?PmSess1=1182517&amp;SXREF=2">Banner Stands<span class="clsCatOffCount"> (12)</span></a></dd> <dd class="clsCatTree1 clsCTree1" id="CatImg3"><a href="../OeCart/OeFrame.asp?PmSess1=1182517&amp;SXREF=3">Data Sheet<span class="clsCatOffCount"> (16)</span></a></dd> <dd class="clsCatTree1 clsCTree1" id="CatImg4"><a href="../OeCart/OeFrame.asp?PmSess1=1182517&amp;SXREF=4">Giveaways<span class="clsCatOffCount"> (9)</span></a></dd> <dd class="clsCatTree1 clsCTree1" id="CatImg5"><a href="../OeCart/OeFrame.asp?PmSess1=1182517&amp;SXREF=5">Table Top<span class="clsCatOffCount"> (0)</span></a></dd> </dl> </div> 

Answer 3

The issue with your code is that using .html() to read an element's HTML will evaluate only the first element in the selection, which in your case is (2) .

However, using .html("hello world") to set an element's HTML will updated all elements in the selection.

Therefore, you're setting all elements to the .html() of the first.

Instead, pass a function to the jQuery .html() method to evaluate them each on a case-by-case basis:

 $(".clsCatOffCount").html(function() { return $(this).html().replace("(", "").replace(")", ""); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="clsCatOffCount">(1)</span> <span class="clsCatOffCount">(2)</span> <span class="clsCatOffCount">(3)</span> <span class="clsCatOffCount">(4)</span> <span class="clsCatOffCount">(5)</span> 

Answer 4

const countOffs = $('span.clsCatOffCount');
countOffs.each((idx, el) => {
  const content = el.innerHTML;
  el.innerHTML = content.replace(/\(|\)/g, '')
});

Or just use Tyler's answer with the regex replace above