데이터 속성으로 요소 선택

data속성을 기반으로 요소를 선택하는 쉽고 간단한 방법이 있습니까? 예를 들어, 명명 된 속성 데이터를 보유하고있는 모든 앵커 선택 customerID의 값을 갖는다 22.

rel그러한 정보를 저장 하는 데 주저 하거나 다른 속성 을 사용하는 것이 주저 하지만 어떤 데이터가 저장되어 있는지에 따라 요소를 선택하는 것이 훨씬 어렵다는 것을 알았습니다.

$('*[data-customerID="22"]');

를 생략 할 수는 *있지만 사용중인 jQuery 버전에 따라 올바르게 기억하면 잘못된 결과가 발생할 수 있습니다.

이 경우 Selectors API ( document.querySelector{,all}) 와의 호환성을 위해 속성 값 ( 22) 주위의 따옴표 는 생략 할 수 없습니다 .

또한 jQuery 스크립트에서 데이터 속성을 많이 사용하는 경우 HTML5 사용자 정의 데이터 속성 플러그인 사용을 고려할 수 있습니다 . 이를 사용 .dataAttr('foo')하면를 사용하여 훨씬 더 읽기 쉬운 코드를 작성할 수 있으며 축소 후 파일 크기가 줄어 듭니다 (를 사용하는 것과 비교 .attr('data-foo')).

인터넷 검색을하고 데이터 속성을 사용하여 선택하는 방법에 대한 일반적인 규칙을 원할 경우 :

$("[data-test]")단지 어느 한 요소를 선택한다 갖는 데이터 속성이 (어떠한 속성의 값을 상관 없음). 포함 :

<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>

$('[data-test~="foo"]')data 속성에 포함되어 foo 있지만 정확하지 않아도되는 요소를 선택합니다 .

<div data-test="foo">Exact Matches</div>
<div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>

$('[data-test="the_exact_value"]')데이터 속성 정확한 값이 the_exact_value인 요소를 선택합니다 ( 예 :

<div data-test="the_exact_value">Exact Matches</div>

하지만

<div data-test="the_exact_value foo">This won't match</div>

를 사용 $('[data-whatever="myvalue"]')하면 html 속성이있는 것을 선택하지만 최신 jQueries에서는 $(...).data(...)데이터를 첨부하는 데 사용 하면 마술 브라우저를 사용하고 html에 영향을 미치지 않으므로 이전 답변에.find 표시된 것처럼 검색되지 않는 것 같습니다 .

확인 (1.7.2 이상으로 테스트) (또한 바이올린 참조 ) : (보다 완벽하게 업데이트 됨)

var $container = $('<div><div id="item1"/><div id="item2"/></div>');

// add html attribute
var $item1 = $('#item1').attr('data-generated', true);

// add as data
var $item2 = $('#item2').data('generated', true);

// create item, add data attribute via jquery
var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);

// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');

jQuery가 없으면 JavaScript 답변을 보지 못했습니다. 잘만되면 그것은 누군가를 돕는다.

var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!';

<a data-customerID='22'>test</a>

정보 :

• 데이터 속성

• .querySelectorAll ();

data 속성을 가진 모든 앵커를 선택하려면 data-customerID==22을 포함 a하여 검색 범위를 해당 요소 유형으로 만 제한 해야 합니다. 페이지에 많은 요소가있을 때 큰 루프 또는 높은 빈도로 데이터 속성 검색을 수행하면 성능 문제가 발생할 수 있습니다.

$('a[data-customerID="22"]');

기본 JS 예제

요소의 NodeList 가져 오기

var elem = document.querySelectorAll('[data-id="container"]')

html : <div data-id="container"></div>

첫 번째 요소 얻기

var firstElem = document.querySelector('[id="container"]')

html : <div id="container"></div>

노드리스트를 리턴하는 노드 콜렉션을 대상으로합니다.

document.getElementById('footer').querySelectorAll('[data-id]')

html :

<div class="footer">
    <div data-id="12"></div>
    <div data-id="22"></div>
</div>

여러 (OR) 데이터 값을 기반으로 요소 가져 오기

document.querySelectorAll('[data-section="12"],[data-selection="20"]')

html :

<div data-selection="20"></div>
<div data-section="12"></div>

결합 된 (AND) 데이터 값을 기반으로 요소 가져 오기

document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')

html :

<div data-prop1="12" data-prop2="20"></div>

값이 시작하는 항목 가져 오기

document.querySelectorAll('[href^="https://"]')

Jquery filter () 메소드를 통해 :

http://jsfiddle.net/9n4e1agn/1/

HTML :

<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>

자바 스크립트 :

$(function() {    
    $('button').filter(function(){
        return $(this).data("id")   == 2}).css({background:'red'});  
     });

Safari 8.0$('[data-XXX=111]') 에서는 다음과 같은 구성이 작동하지 않습니다 .

data attribute를 이런 식으로 $('div').data('XXX', 111)설정하면 다음과 같이 DOM에서 data attribute를 직접 설정 한 경우에만 작동합니다 $('div').attr('data-XXX', 111).

jQuery 팀은 메모리 변경 및 각 변경 데이터 속성에 대한 DOM 재구성의 과도한 작업을 방지하기 위해 가비지 수집기를 최적화했기 때문이라고 생각합니다.

이 크롬에서 작동하려면 값이 있어야 하지 따옴표의 또 다른 쌍을 가지고있다.

예를 들어 다음과 같이 작동합니다.

$('a[data-customerID=22]');

프로그래밍 방식으로 데이터 항목이 첨부되어 있는지 (dom 속성을 통하지 않음) 요소를 기준으로 요소를 필터링하는 것이 바람직한 경우가 있습니다 .

$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();

위의 방법은 작동하지만 읽을 수는 없습니다. 더 나은 방법은 이러한 종류의 테스트를 위해 의사 선택기를 사용하는 것입니다.

$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
    return function (domEl) {
        var $el = $(domEl);
        return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
    };
});

이제 우리는 원래 문장을보다 유창하고 읽기 쉬운 것으로 리팩토링 할 수 있습니다.

$el.filter(":hasData('foo-bar')").doSomething();

'살아있는 표준'의 일부 기능으로 모든 답변을 완성하기 만하면됩니다. (지금은 html5 시대) 타사 라이브러리없이 할 수 있습니다.

• querySelector가 포함 된 순수 / 일반 JS (CSS 선택기 사용) :
  • DOM에서 첫 번째를 선택하십시오. document.querySelector('[data-answer="42"],[type="submit"]')
  • DOM에서 모두 선택하십시오. document.querySelectorAll('[data-answer="42"],[type="submit"]')
• 순수 / 일반 CSS
  • 일부 특정 태그 : [data-answer="42"],[type="submit"]
  • 특정 속성을 가진 모든 태그 : [data-answer]또는input[type]