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

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) );
        });
    }
});

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

[编辑]，尽管您在一个项目上有多个类别的情况，但这并没有考虑在内。

Answer 2

当然，您的选择器不必是“li”，它可以是您所了解的有关要选择的项目的任何标准。但要获取整个类属性，只需使用 .attr("class") 选择器。像这样

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

Answer 3

现在我更好地理解了您的问题，您是否尝试过使用 原生 Sizzle 选择器去做你想做的事？

包含单词选择器应该可以满足您的需求：

$('#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 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);