jquery 데이터 선택기

jquery 데이터 선택기

요소에 저장된 값을 기준으로 요소를 선택해야 합니다..data()물건. 사용하여 최상위 .최소한 다음과 같은 셀렉터를 사용하여 최상위 데이터 속성을 선택하고자 합니다.

$('a').data("category","music");
$('a:data(category=music)');

또는 선택기가 정규 속성 선택기 형식일 수도 있습니다.

$('a[category=music]');

또는 속성 형식이지만 지정자를 사용하여 지정할 수 있습니다..data():

$('a[:category=music]');

James Padolsey의 구현 방법이 간단해 보이지만 훌륭하다는 것을 알게 되었습니다.해당 페이지에 표시된 미러 메서드 위의 셀렉터 형식입니다.이 시즐 패치도 있습니다.

어떤 이유에서인지 얼마 전에 jQuery 1.4에 jquery의 값에 대한 셀렉터 지원이 포함되어 있다는 것을 읽은 기억이 납니다..data()물건입니다요.그런데 지금 찾아보니까 안 보이네요.아마도 그것은 제가 본 기능 요청이었을 것입니다.이것에 대한 지원이 있나요? 저는 단지 그것을 보지 못하고 있는 것뿐인가요?

이상적으로 점 표기법을 사용하여 데이터()의 하위 속성을 지원하고 싶습니다.다음과 같은 경우:

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

또한 지정된 모든 데이터 셀렉터가 있는 요소만 있는 여러 개의 데이터 셀렉터를 지원하고 싶습니다.일반 jquery 다중 선택기는 OR 연산을 수행합니다.예를 들어.$('a.big, a.small')선택한a두 클래스 중 하나가 포함된 태그big아니면small 있습니다. 아마도 :). AND를 찾고 있습니다. 아마도 다음과 같습니다.

$('a').data("artist",{id: 3281, name: "Madonna"});
$('a').data("category","music");
$('a[:category=music && :artist.name=Madonna]');

마지막으로 데이터 셀렉터에서 비교 연산자와 regex 기능을 사용할 수 있으면 좋을 것 같습니다. 그래서$(a[:artist.id>5000])가능할 겁니다제가 이 일을 대부분 할 수 있다는 것을 깨달았어요filter(), 간단한 셀렉터 포맷이 있으면 좋을 것 같습니다.

이를 위해 어떤 솔루션을 사용할 수 있습니까?이때 제임스 파돌시의 해결책이 최선입니까?저의 관심사는 주로 성능에 관한 것이지만 하위 속성 점 표시 및 다중 데이터 선택기와 같은 추가 기능에 관한 것이기도 합니다.이러한 것들을 지원하거나 어떤 면에서 더 나은 다른 구현이 있습니까?

제가 선택하는 순간은 다음과 같습니다.

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

이것은 잘 작동하는 것처럼 보이지만, jQuery가 'data-' 접두사 없이 그 속성으로 선택할 수 있다면 좋을 것입니다.

저는 동적으로 jQuery를 통해 요소에 추가된 데이터로 이것을 테스트하지 않았기 때문에 이 방법의 단점이 될 수 있습니다.

새 제품을 만들었습니다.data중첩 쿼리 및 AND 조건을 수행할 수 있는 선택기입니다.용도:

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

패턴은 다음과 같습니다.

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

"operator" 및 "체크"는 선택 사항입니다.그래서, 만약 당신이 가지고 있는 것이:data(a.b.c)그것은 단순히 그것의 진실성을 확인할 것입니다.a.b.c.

아래 코드에서 사용 가능한 연산자를 확인할 수 있습니다.에 ㅇ~=regex 테스트가 가능합니다.

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

몇 가지 변형을 해서 테스트해봤는데 꽤 잘 되는 것 같아요.곧 Github repo로 추가할 예정입니다(전체 테스트 제품군 포함). 그러니 주의하세요!

코드:

(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("user", {name: {first:"Tom",last:"Smith"},username: "tomsmith"});

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

당신에게 경고하고 싶습니다.$('a[data-attribute=true]')데이터() 함수를 통해 DOM 요소에 데이터를 첨부하면 Ashley의 답변에 따라 작동하지 않습니다.

HTML에 실제 데이터 특성을 추가하면 예상한 대로 작동하지만 jQuery는 데이터를 메모리에 저장하므로 결과를 얻을 수 있습니다.$('a[data-attribute=true]')정확하지 않을 것입니다.

데이터 플러그인 http://code.google.com/p/jquerypluginsblog/, 을 사용해야 합니다. 드미트리의 것을 사용하세요.filter솔루션, 또는 모든 요소에 대해 $.each를 수행하고 .data ()을 반복적으로 확인합니다.

그냥 이렇게 하는 필터 플러그인이 있어요 :)

질문에 근거한 몇 가지 예시:

$('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

성능은 가능한 것과 비교해 볼 때 크게 향상되지는 않을 것입니다.$._cache그리고 대응하는 요소를 잡는 것이 가장 빠르지만, 훨씬 더 회전이 빠르고, 물건에 접근하는 방법에 관해서는 그다지 "jQuery-ey"가 아닙니다(보통 요소 쪽에서 들어옵니다).우선, 고유한 Id에서 요소로 이동하는 과정 자체가 성능 측면에서 복잡하기 때문에 어쨌든 이것이 가장 빠르다는 것을 확신할 수 없습니다.

말씀하신 비교 선택기는 플러그인에 내장된 지원이 없지만, 큰 문제 없이 추가할 수 있습니다.

설정할 수 있습니다.data-*느릅나무에 의하다attr(), 그런 다음 해당 속성을 사용하여 선택합니다.

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

그리고 이제 그 느릅나무는 둘 다attr()그리고.data()123을 얻을 것입니다.

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

그러나 값을 456으로 수정하면attr(),data() 아직 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

그러니까 내가 알기로는, 당신은 아마도 서로 섞이지 않는 것을 피해야 할 것 같습니다.attr()그리고.data()필요 없는 경우 코드에 있는 명령어를 입력합니다.왜냐면attr()DOM과 직접적으로 일치하는 것 같습니다.data()초기 값이 DOM에서 나올 수 있지만, 는 '메모리'와 상호 작용합니다.하지만 핵심은 이 둘이 반드시 일치하는 것은 아니라는 것입니다.

그러니까 조심하세요.

어쨌든, 만약 당신이 그것을 바꾸지 않는다면,data-*DOM이나 메모리에 속성을 지정하면 문제가 발생하지 않습니다.값 수정을 시작하는 즉시 잠재적인 문제가 발생할 수 있습니다.

@Clarence Liu to @Ash의 답변과 이 게시물에 감사드립니다.

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

그건 효과가 있다.Attribute Equals Selector [name="value"]를 참조하십시오.

.UI를 사용하면 (간단한) 버전의:data데이터 항목의 존재 여부를 검사하는 셀렉터와 함께 다음과 같은 작업을 수행할 수 있습니다.$("div:data(view)"), 아니면$( this ).closest(":data(view)").

http://api.jqueryui.com/data-selector/ 를 보세요. 그들이 얼마나 오랫동안 그것을 가지고 있었는지 모르지만, 그것은 지금 거기에 있습니다!

다음은 삶을 단순화하는 플러그인 https://github.com/rootical/jQueryDataSelector 입니다.

이렇게 사용합니다.

data selector           jQuery selector
  $$('name')              $('[data-name]')
  $$('name', 10)          $('[data-name=10]')
  $$('name', false)       $('[data-name=false]')
  $$('name', null)        $('[data-name]')
  $$('name', {})          Syntax error

언급URL : https://stackoverflow.com/questions/2891452/jquery-data-selector