Data atributu ilə element seçimi

Öz data əsaslanan elementləri seçmək üçün sadə və birbaşa üsul varmı? Məsələn, 22 dəyərinə sahib customerID adı adlı bir məlumat öznitəsinə sahib olan bütün bağlamaları seçin.

Bu cür məlumatları saxlamaq üçün rel və ya digər xüsusiyyətləri istifadə etməyə cəsarət etmirəm, amma hansı məlumatların saxlanıldığına əsaslanan element seçmək mənim üçün daha çətindir.

853
21 марта '10 в 19:13 2010-03-21 19:13 Hazem 21 mart '10 'da saat 19: 13-da təyin olundu
@ 11 cavab
 $('*[data-customerID="22"]'); 

Siz * saxlaya bilərsiniz, amma düzgün xatırlayıramsa, hansı jQuery versiyasını istifadə etdiyinə görə yanlış nəticə verə bilər.

Seçicilərin API ( document.querySelector{,all} ) ilə uyğunluq üçün, atribut dəyərinin ( 22 ) ətrafındakı quotes bu halda atlana bilməz .

Əlavə olaraq, jQuery skriptlərindəki məlumat öznitelikleriyle çox çalışarsanız, HTML5 xüsusi veri öznitelikleri eklentisini istifadə etmeniz tələb oluna bilər. Bu da .dataAttr('foo') ilə daha oxunaqlı bir kod yazmağa imkan verir və minimuma .attr('data-foo') sonra daha kiçik bir fayl ölçüsü .attr('data-foo') istifadə etməklə müqayisədə).

1262
21 марта '10 в 19:14 2010-03-21 19:14 21 Mart '10 'da saat 19:14' da Mathias Bynens ' a cavab verdi 2010-03-21 19:14

İnsanlar googling üçün və daha çox ümumi seçim qaydalarını veri atributları ilə əldə etmək istəyirlər:

$("[data-test]") sadəcə məlumatın xüsusiyyətinə malik olan hər hansı elementi seçəcək (atribut dəyərindən asılı olmayaraq). O cümlədən:

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

$('[data-test~="foo"]') data özniteliği foo ehtiva edən hər hansı bir elementi seçəcək, lakin məsələn, dəqiq olmalıdır:

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

$('[data-test="the_exact_value"]') , data özniteliğinin dəqiq dəyərinin the_exact_value olduğu hər hansı bir element the_exact_value , məsələn:

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

lakin deyil

 <div data-test="the_exact_value foo">This won't match</div> 
246
07 марта '15 в 23:03 2015-03-07 23:03 Cavab JTG tərəfindən 07.03 ' də saat 23:03' də verilir. 2015-03-07 23:03

$('[data-whatever="myvalue"]') edərək, html xüsusiyyətləri ilə bir şey seçəcək, lakin yeni jQueries-də $(...).data(...) istifadə edərsiniz $(...).data(...) , bir növ sehrli brauzerdən istifadə edir və .find təsir etmir, belə ki, əvvəlki cavabda göstərildiyi kimi, tapılmadı .

Doğrulayın (1.7.2 + dən təsdiqlənmişdir) (həmçinin fiddleə baxın): (daha dolğun olaraq yenilənir)

 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"]'); 
122
26 июля '12 в 18:57 2012-07-26 18:57 Cavab 26 iyul 'da 18:57' da drzaus tərəfindən verilir 2012-07-26 18:57

data-customerID==22 data özniteliğiyle bütün bağlamaları seçmək üçün axtarışı yalnız bu element elementinə məhdudlaşdırmaq üçün a daxil edilməlidir. Böyük bir döngədə və ya yüksək tezlikdə data atributları üçün axtarış aparmağı yerinə yetirərkən, səhifədə bir çox element var olduqda, performans problemlərinə səbəb ola bilər.

 $('a[data-customerID="22"]'); 
58
23 сент. Travis J tərəfindən verilmiş cavab 23 Sep. 2013-09-23 19:53 '13 at 19:53 2013-09-23 19:53

JQuery olmadan javascript cavab görməmişəm. Bu birinə kömək edir.

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

Məlumat:

43
29 дек. Cavab SPottuit tərəfindən verilir 29 Dekabr. 2015-12-29 17:44 '16 'da 17:44' de, 2015-12-29 17:44

jQuery filter () metodunu istifadə edərək:

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'}); }); 
11
09 июля '15 в 2:26 2015-07-09 02:26 Cavab Razan Paul tərəfindən iyul ayının 09-da saat 02: 26-da verilir. 2015-07-09 02:26

Doğma js nümunələri

NodeList Məhsullarını Alın

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

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

İlk maddəni əldə edin

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

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

Nodelisti qaytaran bir node toplusunu məqalə edin

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

HTML:

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

Birdən çox (OR) məlumat dəyərinə əsasən maddələr əldə edin

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

HTML:

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

Birləşdirilmiş (AND) məlumat dəyərlərinə əsaslanan maddələr əldə edin

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

HTML:

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

Dəyərləri ilə başlayan maddələr alın

 document.querySelectorAll('[href^="https://"]') 
9
15 нояб. Cavab 15 noyabr etoksin tərəfindən verilir 2016-11-15 10:53 '16 saat 10:53 'da 2016-11-15 10:53

Belə bir quruluş: $('[data-XXX=111]') Safari 8.0'da işləmir.

Data funksiyasını bu kimi təyin $('div').data('XXX', 111) : $('div').data('XXX', 111) Data funksiyasını belə DOM-da belə bir şəkildə təyin edərkən işləyir: $('div').attr('data-XXX', 111) .

Hesab edirəm ki, jQuery komandası yaddaş dəyişikliyi və ağır DOM bərpa əməliyyatlarında hər dəyişmə məlumatı ilə əlaqələndirmək üçün çöp toplayıcısını optimallaşdırır.

9
27 окт. Anton Danilchenko tərəfindən verilən cavabı Oct 27 2014-10-27 12:13 '14 at 12:13 2014-10-27 12:13

Bunun üçün, Chrome-da dəyərdə başqa bir cüt qiymət yoxdur .

Məsələn, aşağıdakı kimi işləyir:

 $('a[data-customerID=22]'); 
8
28 дек. Cavab 28 dekabrda user55318 tərəfindən verilir . 2014-12-28 18:48 '14 da 18:48 2014-12-28 18:48

Bəzən elə elementlərə elə elementlərə malikdir ki, proqrama əsaslanan məlumat elementləri olub-olmamasına əsasən (başqa halda dom-atributları deyil) elementləri silmək lazımdır:

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

Yuxarıdakı iş, ancaq çox oxunan deyil. Ən yaxşı yanaşma bu cür şeyləri sınamaq üçün yalançı seçicidən istifadə etməkdir:

 $.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"; }; }); 

İndi biz orijinal ifadəni daha sərbəst və anlaşılır bir şeyə çevirə bilərik:

 $el.filter(":hasData('foo-bar')").doSomething(); 
4
09 дек. Cavab XDS 09 dek verilir . 2016-12-09 16:01 '16 16:00 'da 2016-12-09 16:01

İndi (html5 dövründə) "həyat səviyyəsinin" bəzi xüsusiyyətlərinin köməyi ilə bütün cavabları başa çatdırmaq üçün bu, üçüncü tərəf kitabxanaları olmadan edilə bilər:

  • querySelector ilə saf / düz JS (CSS selektorunu istifadə edir):
    • DOM-da ilk birini seçin: document.querySelector('[data-answer="42"],[type="submit"]')
    • DOM hər şeyi seçin: document.querySelectorAll('[data-answer="42"],[type="submit"]')
  • təmiz / sadə CSS
    • Bəzi xüsusi etiketlər: [data-answer="42"],[type="submit"]
    • xüsusi bir xüsusiyyət ilə bütün etiketlər: [data-answer] və ya input[type]
0
20 сент. Cavab Sven tərəfindən 20 Sentyabrda verildi . 2018-09-20 10:56 '18 saat 10:56 'da 2018-09-20 10:56

tags ilə bağlı digər suallar və ya bir sual