[jquery] jquery 데이터 선택기

data중첩 된 쿼리 및 AND 조건을 수행 할 수 있는 새로운 선택기를 만들었습니다 . 용법:

$('a:data(category==music,artist.name==Madonna)');

패턴은 다음과 같습니다.

:data( {namespace} [{operator} {check}]  )

“operator”및 “check”는 선택 사항입니다. 따라서 당신이 가지고있는 것만 있다면 :data(a.b.c)의 진실성 을 점검 할 것 입니다 a.b.c.

아래 코드에서 사용 가능한 연산자를 확인할 수 있습니다. 그중 ~=정규 표현식 테스트가 가능합니다.

$('a:data(category~=^mus..$,artist.name~=^M.+a$)');

몇 가지 변형으로 테스트했으며 꽤 잘 작동하는 것 같습니다. 아마 이것을 전체 테스트 스위트와 함께 곧 Github 저장소로 추가 할 것이므로 조심하십시오!

코드:

(function(){

    var matcher = /\s*(?:((?:(?:\\\.|[^.,])+\.?)+)\s*([!~><=]=|[><])\s*("|')?((?:\\\3|.)*?)\3|(.+?))\s*(?:,|$)/g;

    function resolve(element, data) {

        data = data.match(/(?:\\\.|[^.])+(?=\.|$)/g);

        var cur = jQuery.data(element)[data.shift()];

        while (cur && data[0]) {
            cur = cur[data.shift()];
        }

        return cur || undefined;

    }

    jQuery.expr[':'].data = function(el, i, match) {

        matcher.lastIndex = 0;

        var expr = match[3],
            m,
            check, val,
            allMatch = null,
            foundMatch = false;

        while (m = matcher.exec(expr)) {

            check = m[4];
            val = resolve(el, m[1] || m[5]);

            switch (m[2]) {
                case '==': foundMatch = val == check; break;
                case '!=': foundMatch = val != check; break;
                case '<=': foundMatch = val <= check; break;
                case '>=': foundMatch = val >= check; break;
                case '~=': foundMatch = RegExp(check).test(val); break;
                case '>': foundMatch = val > check; break;
                case '<': foundMatch = val < check; break;
                default: if (m[5]) foundMatch = !!val;
            }

            allMatch = allMatch === null ? foundMatch : allMatch && foundMatch;

        }

        return allMatch;

    };

}());

답변

$('a[data-attribute=true]')

$('a').data("user", {name: {first:"Tom",last:"Smith"},username: "tomsmith"});

$('a').filter(function() {
    return $(this).data('user') && $(this).data('user').name.first === "Tom";
});

$('a:data("category=music")')
$('a:data("user.name.first=Tom")');
$('a:data("category=music"):data("artist.name=Madonna")');
//jQuery supports multiple of any selector to restrict further, 
//just chain with no space in-between for this effect

var elm = $('a').attr('data-test',123); //assign 123 using attr()
elm = $("a[data-test=123]"); //select elm using attribute

console.log(elm.attr('data-test')); //123
console.log(elm.data('test')); //123

elm.attr('data-test',456); //modify to 456
elm = $("a[data-test=456]"); //reselect elm using new 456 attribute

console.log(elm.attr('data-test')); //456
console.log(elm.data('test')); //123

$('a[data-category="music"]')