Использование Sizzle Engine в jQuery для поиска класса (продвинутый уровень) - PullRequest
Новая
       23

Использование Sizzle Engine в jQuery для поиска класса (продвинутый уровень)

1 голос
/ 14 января 2010

Что я пытаюсь сделать, это посмотреть, если объект 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 ]

1 голос
/ 15 января 2010

Вы можете использовать функцию 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) );
        });
    }
});

Имейте в виду, что селектор может соответствовать более чем одному классу. Какой результат вы бы хотели тогда? список всех матчей? или только первое (в качестве значения предупреждения в примере)

[править] это не учитывает, хотя случай, когда у вас есть более одного класса для элемента ..

0 голосов
/ 15 января 2010

Я придумала решение без всплесков, использующее подмножество селекторов (^=, $=, *= и =), которое полностью работает. Однако решение 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);
0 голосов
/ 15 января 2010

Конечно, ваш селектор не обязательно должен быть "li", это могут быть любые критерии, которые вы знаете об элементах, которые хотите выбрать.но чтобы получить весь атрибут класса, просто используйте селектор .attr ("class").как это 

$(document).ready(function(){
    $("li").each(function (i) {
        var class = $(this).attr("class");
            alert(class);
    });
});
0 голосов
/ 14 января 2010

Теперь, когда я лучше понимаю ваш вопрос, вы пытались использовать родные селекторы Sizzle , чтобы делать то, что вы пытаетесь сделать?

содержит селектор слов должен делать то, что вы ищете: 

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

Однако этот процесс имеет недостатки, поскольку может быть несколько тегов с похожими классами, которые не будут учитываться, а отдельные теги могут потенциально иметь несколько классов с похожими именами.

...