Sıfır ya da daha fazla rasgele bir HTML öğesi verilen data-* nasıl bir anahtar değer çiftleri bir listesini alabilirsiniz veriler için öznitelikleri.

E. g. verilen bu

<div id='prod' data-id='10' data-cat='toy' data-cid='42'>blah</div>

Bu program aracılığıyla almak için mümkün olmak istiyorum:

{ "id":10, "cat":"toy", "cid":42 }

Kullanarak (v1.jQuery 4.3) veri $.data() kullanarak tek tek bit erişim eğer anahtarları önceden biliniyorsa, basit, ama bir çok veri setleri keyfi ile daha ne kadar açık değildir.

Bir için 'basit' eğer bir WordPress kullanmak bir çözüm var, ama daha düşük seviyeli bir yaklaşım, aksi takdirde sakıncası olmaz. bakıyorum $('#prod').attributes ayrıştırmak için çalışırken ben bir denedim ama javascript-fu benim eksikliği beni hayal kırıklığına uğratmak.

güncelleme

customdata ihtiyacım olan şey. Ancak, sadece işlevselliği bir kısmı için bir jQuery eklentisi dahil olmak üzere bir overkill gibi görünüyordu.

Kaynak bakıyorsun bana kendi kodunu (ve benim-fu javascript geliştirilmiş) düzeltme yardımcı oldu.

İşte ben ile geldi çözüm:

function getDataAttributes(node) {
    var d = {}, 
        re_dataAttr = /^data\-(. )$/;

    $.each(node.get(0).attributes, function(index, attr) {
        if (re_dataAttr.test(attr.nodeName)) {
            var key = attr.nodeName.match(re_dataAttr)[1];
            d[key] = attr.nodeValue;
        }
    });

    return d;
}

güncelleme 2

Kabul cevabı gösterildiği gibi, çözüm jQuery (>ile saçmadır =1.4.4). $('#prod').data() gerekli veri dict dönecekti. Yardımların için çok teşekkürler.

Eğer bir WordPress kullanmak için çalışıyorsanız aslında, sürüm1.4.31.4.4 (aşağıdaki yorum belirtildiği gibi bu hata nedeniyle), data-* .data() ile desteklenen özellikler:

JQuery 1.4.3 olarak HTML 5 data- öznitelikler otomatik olarak yapılacaktır bir WordPress kullanmak için çekti veri nesnesi.

Dizeleri değişmeden kalır unutmayın JavaScript değerleri dönüştürülürken onlara bağlı değere (bu Boolean değerleri, sayıları, nesneleri içerir diziler ve boş). data- öznitelikleri ilk çekilmektedir zaman data özelliği erişilebilir ve sonra artık erişilebilir ya da mutasyona uğramış vardır (tüm veri değerleri sonra saklanır içten bir WordPress kullanmak).

jQuery.fn.data işlev döndürür tüm data- öznitelik içinde bir nesne olarak anahtar-değer çiftleri ile anahtar bölümünün öznitelik adı sonra data- ve değeri olmuştur değeri öznitelik sonra dönüştürülmüş aşağıdaki kuralları ifade yukarıda.

Eğer bu sizi ikna etmez ise hiç de basit bir demo hazırladım: http://jsfiddle.net/yijiang/WVfSg/