Veri özelliğine göre öğe seçme

Özelliklerine göre öğeleri seçmek için kolay ve basit bir yöntem var datamı? Örneğin customerID, değerine sahip veri özniteliğine sahip tüm bağlayıcıları seçin 22.

Ben relbu tür bilgileri saklamak için kullanmak için tereddüt veya diğer öznitelikler, ama içinde hangi verilerin depolandığına dayalı bir öğe seçmek çok daha zor buluyorum.

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

Bunu atlamanız gerekir *, ancak doğru bir şekilde hatırlarsam, kullandığınız jQuery sürümüne bağlı olarak, bu hatalı sonuçlar verebilir.

Selectors API ( document.querySelector{,all}) ile uyumluluk için , bu durumda özellik değeri ( 22) etrafındaki tırnak işaretlerinin atlanamayabileceğini unutmayın .

Ayrıca, jQuery komut dosyalarınızda veri öznitelikleriyle çok çalışıyorsanız, HTML5 özel veri öznitelikleri eklentisini kullanmayı düşünebilirsiniz . Bu, kullanarak daha da okunabilir bir kod yazmanıza olanak tanır .dataAttr('foo')ve küçültmeden sonra (kullanıma kıyasla .attr('data-foo')) daha küçük bir dosya boyutu sağlar .

Google çalışanları ve veri öznitelikleriyle seçim hakkında daha genel kurallar isteyenler için:

$("[data-test]")yalnızca data özelliğine sahip herhangi bir öğeyi seçecektir (özelliğin değeri ne olursa olsun). Dahil olmak üzere:

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

$('[data-test~="foo"]') veri özelliğinin bulunduğu herhangi bir öğeyi seçer içerdiği foo ancak tam olması gerekmeyen , örneğin:

<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"]')veri özelliği tam değerinin olduğu herhangi bir öğeyi seçer the_exact_value, örneğin:

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

Ama değil

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

Kullanmak $('[data-whatever="myvalue"]')html özniteliklerine sahip bir şey seçecektir, ancak daha yeni jQueries'de $(...).data(...)veri eklemek için kullanırsanız, bazı sihirli tarayıcı şeyleri kullanır ve html'yi etkilemez, bu nedenle önceki cevapta.find belirtildiği gibi keşfedilmez .

Doğrulama (1.7.2+ ile test edildi) (ayrıca kemanı inceleyin ): (daha eksiksiz olacak şekilde güncellendi)

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 olmadan bir JavaScript yanıtı görmedim. Umarım birine yardımcı olur.

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

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

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

Bilgi:

• veri özellikleri

• .querySelectorAll ();

Veri niteliği olmayan tüm çapa seçmek için data-customerID==22, sen içermelidir ayalnızca bu eleman türü aramanın kapsamını sınırlamak için. Sayfada çok sayıda öğe olduğunda veri özniteliği aramaları büyük bir döngüde veya yüksek sıklıkta yapmak performans sorunlarına neden olabilir.

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

Yerel JS Örnekleri

Öğelerin Düğüm Listesini Al

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

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

İlk elemanı al

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

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

Bir nodelist döndüren bir düğüm koleksiyonunu hedefleme

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

html:

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

Öğeleri birden çok (VEYA) veri değerine göre alma

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

html:

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

Birleşik (AND) veri değerlerini temel alan öğeleri alma

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

html:

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

Değerin başladığı öğeleri alın

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

Jquery filter () yöntemi ile:

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'});  
     });

Bunun gibi inşaat: Safari 8.0'da$('[data-XXX=111]') çalışmıyor .

Veri özelliğini şu şekilde ayarlarsanız: $('div').data('XXX', 111)yalnızca veri özelliğini doğrudan DOM'da şu şekilde ayarlarsanız çalışır:$('div').attr('data-XXX', 111) .

Bunun nedeni, jQuery ekibinin, bellek değişikliklerini ve her değişiklik veri özniteliğinde DOM üzerinde yeniden oluşturma işlemlerini önlemek için çöp toplayıcıyı optimize etmesidir.

Bu Chrome'da çalışması için değer gerekir değil başka bir çift tırnak gerekir.

Örneğin, sadece şu şekilde çalışır:

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

Bazen, öğelere programlı olarak eklenmiş veri öğelerine sahip olup olmadıklarına göre filtre uygulamak istenir (diğer bir deyişle dom öznitelikleri aracılığıyla değil):

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

Yukarıdakiler işe yarıyor ama çok okunamıyor. Daha iyi bir yaklaşım, bu tür şeyleri test etmek için bir sahte seçici kullanmaktır:

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

Şimdi orijinal ifadeyi daha akıcı ve okunabilir bir şeye yeniden düzenleyebiliriz:

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

Sadece 'yaşam standardının' bazı özellikleri ile tüm cevapları tamamlamak için - Şimdiye kadar (html5 döneminde) bir 3. taraf kütüphanesi olmadan yapmak mümkündür:

• querySelector ile saf / düz JS (CSS seçicileri kullanır):
  • DOM'da ilkini seçin: document.querySelector('[data-answer="42"],[type="submit"]')
  • DOM'daki tümünü seç: document.querySelectorAll('[data-answer="42"],[type="submit"]')
• saf / düz CSS
  • bazı özel etiketler: [data-answer="42"],[type="submit"]
  • belirli bir özelliğe sahip tüm etiketler: [data-answer]veyainput[type]