代码之家 › 专栏 › 技术社区 › Corey Ballou

使用jquery的sizzle引擎查找类(高级)

sizzle pattern-matching jquery-selectors jquery

Corey Ballou · 技术社区 · 15 年前

我想做的是 查看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返回与我的选择器匹配的类名?

4 回复 | 直到 15 年前

Gabriele Petrioli 15 年前

你可以用 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) );
        });
    }
});

请记住,选择器可能匹配多个类。那你想要什么结果?所有匹配项的列表?或者只是第一个(作为示例中的警报值)

[编辑] 尽管在一个项目上有多个类,但这并没有考虑到。

Jon Briccetti 15 年前

当然,您的选择器不必是“li”,它可以是关于您要选择的项目的任何条件。但是要获取整个类属性,只需使用.attr(“class”)选择器。这样地

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

Dan Herbert 15 年前

既然我更好地理解了你的问题,你试过用 native Sizzle selectors 做你想做的事?

这个 contains word selector 应该做你想做的:

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

一旦有了元素,就可以通过调用 attr(...) :

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

这只会提供整个类属性,而不是元素的单个类。你必须 split(' ') 获取单个类并找到匹配类的类名。

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_");

但是,这个过程有缺陷,因为可能有多个具有类似类的标记,这不足以解释,而且单个标记可能有几个具有类似名称的类。

Corey Ballou 15 年前

我提出了一个使用选择器子集的非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);