jQuery를 사용하여 데이터 속성별 요소 선택

jQuery를 사용하여 데이터 속성별 요소 선택

고객의 요구에 따라 요소를 쉽고 쉽게 선택할 수 있는 방법이 있습니까?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"]')데이터 속성에 포함된 요소를 선택합니다. 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 Atribute를 가진 모든 것을 선택하지만 새로운 jQueries에서는 를 사용하는 경우$(...).data(...)데이터를 첨부하기 위해, 그것은 어떤 매직브라우저 같은 것을 사용하고 html에 영향을 주지 않습니다.따라서 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>

정보:

• 데이터 속성

• .query Selector All();

데이터 속성을 사용하여 모든 고정점을 선택하는 방법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>

JavaScript:

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

: 음음음음음음 the the the the the the the:$('[data-XXX=111]')Safari 8.0에서는 동작하지 않습니다.

과 같이 :$('div').data('XXX', 111) 「DOM」과 $('div').attr('data-XXX', 111).

jQuery 팀이 메모리 리크 및 변경 데이터 속성별 DOM 재구축 시 과중한 작업을 방지하기 위해 가비지 컬렉터를 최적화했기 때문이라고 생각합니다.

Chrome에서 작동하려면 값에 다른 따옴표가 없어야 합니다.

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

$('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 시대에서는) 서드 파티의 libs를 사용하지 않고 실시할 수 있습니다.

• 한 pure/plain 셀렉터 를 사용한 pure/plain JS(CSS " " " " ):
  • 첫 합니다.document.querySelector('[data-answer="42"],[type="submit"]')
  • 을 선택합니다.document.querySelectorAll('[data-answer="42"],[type="submit"]')
• '/' CSS
  • " " " :[data-answer="42"],[type="submit"]
  • 애트리뷰트를 가진 : " " " " " " "[data-answer] ★★★★★★★★★★★★★★★★★」input[type]

동작합니다:)

$('ic-star[data-rate="1"]).addClass('rated');

언급URL : https://stackoverflow.com/questions/2487747/selecting-element-by-data-attribute-with-jquery