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

Posted 2023-05-09

【中文标题】捕获在 jQuery 回调函数中匹配的类

【英文标题】：Capture class that was matched in jQuery callback function

【发布时间】：2019-08-26 15:40:54

【问题描述】：

我正在尝试访问由回调函数中的 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 );
        );
    );

【问题讨论】：

let p = $('p').attr("class").match(/[\w-]*sorted[\w-]*/g)

【参考方案1】：

您可以使用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>

另一种方法是使用split() 和startsWith()。 split() className by " " 并使用 find() 获取带有startsWith 字符串"sorted-" 的元素元素

$('[class*=sorted-]').on('click', function() 
    var className = this.className.split(' ').find(x => x.startsWith('sorted-'))
    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>

【讨论】：

我继续将此标记为已批准的答案。我试图避免这条路线，希望 jQuery 能够存储匹配的类，但它可以工作。我会用我想出的解决方案更新我的问题。谢谢@maheer-ali

【参考方案2】：

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

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

希望这有帮助！