使用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

我已经想出了一种使用选择器子集(^=、$=、*=和=)的非si包解决方案，它完全可以工作。不过，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);

Answer 2

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

您可以修改原始函数以将选择器和属性作为参数应用于..。通过这种方式，可以查询指定属性值的结果。

$.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 3

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

包含选字器应该做你想要做的事情：

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

拥有元素之后，就可以通过调用attr(...)轻松地获得类名。

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

这只会给出整个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_");

但是，这个过程也有缺陷，因为可能有多个具有类似类的标记，这将不考虑这些问题，而且单个标记可能有几个具有相似名称的类。