如何用 jQuery 查找和替换类名的前缀?

Posted

技术标签:

【中文标题】如何用 jQuery 查找和替换类名的前缀?【英文标题】:How to find and replace the prefix of a classname with jQuery? 【发布时间】:2020-07-16 22:24:52 【问题描述】:

我有一堆类名,例如 md:blocksm:flex

我需要:

    查找所有以“md”或“sm”开头的类。 在每个“md”和“sm”之后附加“-panel”。 以md-panel:blocksm-panel:flex 结尾。

在 cmets 中的第一次尝试:https://***.com/a/61035473/4019931

第二次尝试:

/*
Add / remove prefixes to DOM element classes. Requieres JQuery.
https://gist.github.com/carloscabo/e0374676c614dd6e6ea19ad4b9ecf9a4
by Carlos Cabo 2016. MIT License.
How it works:
  1. Loops over the group of elements
  2. For each element if it has any class that matches the regex:
    a. If the prefix is NOT present -> adds
    b. If the prefix IS present -> removes
$jquery_selector, conatining group of elements where replacement will be done
regex, refired to the classname, all classes matching this selector in the group of elements will be un/prefixed
prefix, string that will be added / removed from matching classes
add, true = add prefix ( default value)
     flase = remove prefix
Adding 'pre-' to all classnames matched in regex:
addRemoveClassPrefix(
  $('#imgs-slider, #imgs-slider [class^=swiper]'), // JQuery selector: Group of elements where to be executed
  /^swiper/,                                      // RegEx: All classNames starting with 'swiper'
  'pre-'                                          // Add this prefix
);
Removing 'pre-' to all classnames matched in regex:
addRemoveClassPrefix(
  $('[class^=pre-swiper]'), // JQuery selector: Group of elements where to be executed
  /^pre-swiper/,           // RegEx: All classNames starting with 'swiper'
  'pre-'                   // Add this prefix
);
*/

function addRemoveClassPrefix( $jquery_selector, regex, prefix ) 
  if ($jquery_selector.length) 
    $jquery_selector.each( function(idx, el) 
      var
        $el = $(el),
        classes = $el.attr('class').split(' '),
        new_class;
      for (var i = 0; i < classes.length; i++) 
        if (regex.test( classes[i] )) 
          new_class = ( classes[i].indexOf( prefix ) === 0 ) ? classes[i].replace( prefix, '') : prefix+classes[i] ;
          $el.addClass( new_class ).removeClass( classes[i] );
        
      
    );
  

我发现这个 (https://gist.github.com/carloscabo/e0374676c614dd6e6ea19ad4b9ecf9a4) 几乎可以满足我的要求。但我有 3 个问题我想不通。

    如何将正则表达式设置为 /*md/ 而不会变成代码中的注释。 如何在正则表达式中设置多个内容。 /*sm/*md/ ?

    如何更改它,使其在类名中间拆分并添加第一部分+前缀+最后一部分。我试过这个:

    new_class = ( classes[i].indexOf( prefix ) === 0 ) ? classes[i].split('-panel:').join(':') : classes[i].split(':').join('-panel:');

我需要它将所有 'md:value' 转换为 'md-panel:value',反之亦然。任何帮助将不胜感激。

【问题讨论】:

嗯,我可以看到您的代码没有明显错误。您是否尝试过检查 jquery 对象/长度,或者将其简化为使用静态 html 的简单示例? 做了一个小的codepen,你的代码看起来还不错。也许md: 元素是通过 js 生成的,并且在运行时它们还没有添加到 DOM 中? 谢谢@ne1410s + ifthenelse。我意识到它正在寻找以“sm:”或“md:”开头的类值。但我没有意识到这对整个类的含义。因此,当我在“md:block”类之前有另一个类值时,它没有拾取它。通过将 [class^=”value”] 更改为 [class*=”value”] 来修复它并且它起作用了! 【参考方案1】:

使用hasclass并替换

$('this').hasClass('md').replace('md-panel')

【讨论】:

【参考方案2】:

想出了一个解决方案:)

$('[class*="sm:"], [class*="md:"]').attr("class", function(i, val) 
  return val.split(":").join("-panel:");
);

【讨论】:

+1 来解决这个问题。但是,使用此代码要记住的一个副作用是,当且仅当它们碰巧也包含md:sm:. 是的,就是这样。 sm 和 md 类根据屏幕宽度设置响应断点。因此,当侧面板打开时,内容区域不会在正确的位置进行调整。所以我需要在它打开时更改断点并将所有 sm 和 md 类替换为 sm-panel 和 md-panel。 是的,只是如果你有一个名为“hello:test”的无辜类或任何带有: 的类,那么它有时也会更改为hello-panel:test,而其他时候会保留。改不改要看它是否还有md:或sm:。它可能永远不会表现为一个问题,而是一个等待被发掘的错误! 啊,我明白你的意思了。需要更加明确。我会记住这一点的!不知道该怎么做。谢谢? 好的,它已经引起了一个错误。哈。所以我不知道我是如何让返回值成为正确的选择器的。我试过return val.split(val).join("-panel");

以上是关于如何用 jQuery 查找和替换类名的前缀?的主要内容,如果未能解决你的问题,请参考以下文章

如何用批处理找出文件名有特定前缀的文件并删除文件名的前缀及后面的日期

使用路径前缀规则时如何用 Traefik 重写路径?

python如何用format进行进制转换与如何删除进制前缀

如何用另一个键替换散列键

如果 ID 以前缀开头,则 JQuery 替换 html 元素内容

如何用python批量修改文件名(前缀)