捕获在jQuery回调函数中匹配的类

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了捕获在jQuery回调函数中匹配的类相关的知识,希望对你有一定的参考价值。

我正在尝试访问回调函数中由jQuery选择器匹配的类。例如,如果我有以下html

<p class="someclass sorted-1 anotherclass">test</p>

我想匹配这个元素并获得sorted-1类名。值1是任意的。像下面这样的东西。 getMatchedClass()是伪代码。我以为我可以从$(this)获得价值,但我没有看到它。

$('[class*=sorted-]').on('click', function() {
    var className = getMatchedClass();
    console.log(className); // should output 'sorted-1'
});

有谁知道这是否可能?我很难想出搜索条件。我不断得到选定值的结果,这不是我想要的。

谢谢

更新

基于@maheer-ali的回答,我提出了以下解决方案。

   $(function() {
        function column(className) {
            const regex = /sorted-([0-9]+)/;
            return className.match(regex)[0].replace(regex, '$1');
        }
        $('[class*=sorted-]').each(function(i, r) {
            // col is the dashed number after sorted
            // if parsing `sorted-42`, `col` would equal 42
            const col = column($(r).context.className);

            // Use the `col` value here.
            $(r).doSomething({ column: col });
        });
    });
答案

你可以使用match()和正则表达式。并获得结果数组的第一个元素。

$('[class*=sorted-]').on('click', function() {
    var className = this.className.match(/sorted-[0-9]+/)[0];
    console.log(className); // should output 'sorted-1'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="someclass sorted-1 anotherclass">test</p>
另一答案

您传递的回调函数将使用触发它的事件进行调用。

您可以访问event.target.classList以获取该对象上所有类的数组。如果您正在寻找一组固定的类模式,则可以搜索该类的列表。

希望这有帮助!

以上是关于捕获在jQuery回调函数中匹配的类的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的DOM操作

[ jquery 效果 fadeToogle([speed,[easing],[fn]]) ] 此方法用于通过切换不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数(代码

前端面试题之手写promise

捕获回调函数引发的错误

js进阶五(js回调promisepromise嵌套异常处理jquery使用promise)

[ jquery 效果 fadeTo([speed,[easing],[fn]]) ] 此方法用于通过调整不透明度的变化至指定目标来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数(代