Question

我尝试做的是 查看jQuery对象 （甚至DOM元素） 包含特定类 ，使用与Sizzle引擎相同的选择器。

jQuery公开公开Sizzle的内容如下：

jQuery.find = Sizzle;
jQuery.expr = Sizzle.selectors;
jQuery.expr[":"] = jQuery.expr.filters;
jQuery.unique = Sizzle.uniqueSort;

我可以成功使用find方法来确定某个特定的DOM元素是否有一个匹配我的选择器的类，但我似乎无法找到一种方法来访问匹配的选择器的名称。

示例（不按预期工作）

$.fn.extend({
    getMatchingClass: function(selector) {
        return this.each(function() {
            var match = jQuery.find.matches('*[class'+selector+']', [this]);
                    // I would like to return the matching class's FULL NAME,
                    // i.e. lightbox_RESTOFCLASS
            alert(match[0]);
        });
    }
});

var class = $('#lightbox').getMatchingClass('^="lightbox_"');

是否可以使用Sizzle返回与我的选择器匹配的类名？

Answer 1

您可以使用jQuery库的attr( name )函数..

您可以修改原始函数以将选择器和属性作为参数应用于此。这样您就可以查询指定属性值的结果。

$.fn.extend({
    getMatchingClass: function(attribute, selector) {
        return this.each(function() {
            var match = jQuery.find.matches('*['+attribute+selector+']', [this]);
                    // I would like to return the matching class's FULL NAME,
                    // i.e. lightbox_RESTOFCLASS
            alert( $(match[0]).attr(attribute) );
        });
    }
});

请记住，选择器可能匹配多个类。那你想要哪个结果？所有比赛的清单？或者只是第一个（作为示例中的警报值）

[edit] 虽然您在某个项目上有多个课程，但这并未考虑到这一点。

Answer 2

既然我更了解您的问题，您是否尝试过使用native Sizzle selectors来做您想做的事情？

contains word selector应该做你想要的：

$('#lightbox').find("[class~='lightbox']");

获得元素后，您可以通过调用attr(...)：

轻松获取类名

var className = $('#lightbox').find("[class~='lightbox_']").attr('class');

这只会为您提供整个类属性，而不是元素的各个类。您需要split(' ') className来获取各个类并找到匹配的类。

function getSimilarClass(className, searchString) {
    var classes = className.split(' ');
    for(var i = 0; i < classes.length; i++) {
        if (classes[i].indexOf(searchString) != -1) {
            return classes[i];
        }
    }
    return null;
}
var className = $('#lightbox').find("[class~='lightbox_']").attr('class');
var match = getSimilarClass(className, "lightbox_");

然而，这个过程存在缺陷，因为可能存在多个具有相似类的标记，这些标记无法解释，并且单个标记可能具有多个具有相似名称的类。

Answer 3

当然你的选择器不一定是“li”，它可以是你想知道的关于你想要选择的项目的任何标准。但要获取整个类属性，只需使用.attr（“class”）选择器。像这样

$(document).ready(function(){
    $("li").each(function (i) {
        var class = $(this).attr("class");
            alert(class);
    });
});

Answer 4

我使用完全正常工作的选择器子集（^=，$=，*=和=）提出了一个非嘶嘶声的解决方案。然而，Sizzle解决方案本来不错。这应该至少证明插件的预期功能应该做什么。

$.fn.getMatchingClass = function(selector) {
    var regex, class, tmp, $this;
    tmp = $(this)[0].className;
    class = selector;
    class = class.replace(/(\^|\*|\$)?=/i, '');
    class = class.replace(/\"/g, '');
    if (selector.indexOf('$=') != -1) {
        regex = new RegExp('[\\s]+' + class + '$', 'i');
    } else if (selector.indexOf('^=') != -1) {
        regex = new RegExp('^' + class + '[\\s]+', 'i');
    } else if (selector.indexOf('*=') != -1) {
        regex = new RegExp('[a-zA-z0-9_\\-]*' + class + '[a-zA-z0-9_\\-]*', 'gi');
    } else if (selector.indexOf('=') != -1) {
        regex = new RegExp('^' + class + '$', 'i');
    } else return false;
    return tmp.match(regex);
}

var class = $('#myID').getMatchingClass('*="lightbox"');
var class2 = $('#myID').getMatchingClass('^=lightbox');
var class3 = $('#myID').getMatchingClass('="lightbox"');
var class4 = $('#myID').getMatchingClass('$=lightbox');
alert(class);
alert(class2);
alert(class3);
alert(class4);

使用jQuery的Sizzle Engine查找类（高级）

示例（不按预期工作）

4 个答案: