捕获在 jQuery 回调函数中匹配的 class
Capture class that was matched in jQuery callback function
我正在尝试访问由回调函数中的 jQuery 选择器匹配的 class。例如,如果我有以下 HTML,
<p class="someclass sorted-1 anotherclass">test</p>
我想匹配此元素并获取 sorted-1
class 名称。值 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, '');
}
$('[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>
另一种方法是使用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>
您传递的回调函数是用触发它的事件调用的。
您可以访问 event.target.classList
以获取该对象上所有 classes 的数组。如果您要查找一组固定的 class 模式,则可以在该列表中搜索 class。
希望对您有所帮助!
我正在尝试访问由回调函数中的 jQuery 选择器匹配的 class。例如,如果我有以下 HTML,
<p class="someclass sorted-1 anotherclass">test</p>
我想匹配此元素并获取 sorted-1
class 名称。值 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, '');
}
$('[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>
另一种方法是使用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>
您传递的回调函数是用触发它的事件调用的。
您可以访问 event.target.classList
以获取该对象上所有 classes 的数组。如果您要查找一组固定的 class 模式,则可以在该列表中搜索 class。
希望对您有所帮助!