1

我正在尝试做的是查看一个 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

4 回答 4

1

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

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

[编辑]这并没有考虑到你在一个项目上有多个类的情况..

于 2010-01-14T21:00:53.533 回答
0

我提出了一个使用完全工作的选择器子集（、、、和）的^=非嘶嘶声解决方案。然而，一个 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);
于 2010-01-14T21:57:23.667 回答
0

现在我更好地理解了您的问题，您是否尝试过使用本机 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_");

然而，这个过程有缺陷，因为可能有多个具有相似类的标签，这不会考虑，并且单个标签可能有几个具有相似名称的类。

于 2010-01-14T20:44:25.313 回答
0

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

$(document).ready(function(){
    $("li").each(function (i) {
        var class = $(this).attr("class");
            alert(class);
    });
});
于 2010-01-14T21:07:52.597 回答