Question

我有一个CSS类.clsCatOffCount，该类在网站上发生了多次。它以带括号的数字形式生成。

示例：（20）

我正在尝试从生成的数字中删除括号。

我正在使用以下内容，但是它删除了括号，但是在删除括号后，它将所有值更改为相同的数字。

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

这是生成的html，我可以使用另一个类，它是唯一的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

我会做一个循环...

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

Answer 2

是相同的，因为您正在使用该类的第一个元素的html，因此应遍历它们并像这样替换：

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

您的代码存在的问题是，使用.html()来读取元素的HTML将仅评估选择中的第一个元素，在您的情况下为(2)。

但是，使用.html("hello world")来设置一个元素的HTML会更新所选内容中的所有元素。

因此，您要将所有元素设置为第一个元素的.html()。

相反，将一个函数传递给jQuery .html()方法以根据具体情况对它们进行评估：

$(".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, '')
});

或者仅将泰勒的答案与上面的正则表达式替换使用

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

4 个答案: