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

私はあなたの質問をよりよく理解したので、あなたはあなたがやろうとしていることをするためにネイティブのシズルセレクターを使ってみましたか？

含む単語セレクターは、探していることを実行する必要があります。

$('#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 に答える
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 に答える