Speichern von bestimmten Namenskonvention Daten-Attribute in einem Objekt

Question

Ich habe div-Tag wie etwas unter

<div class="class" data-mark-comp="comp1" data-conf-property1="p1" data-conf-property2="p2" data-conf-property3="p3"</div> 

Ich möchte ein Objekt erstellen, die besteht aus data-conf-* Attribute

var conf = $(".class").data() <br> 

ich die oben versucht, aber es besteht aus allen Attributen, die ich nicht nach meiner Anforderung brauche.

var conf = $(".class").data("conf-*") - this one also not working 

Answer 1

Ein Weg ist, Ihr eigenes Plugin zu erstellen.

Dieser regex akzeptiert gegen das Eigentum zu vergleichen: -

$.fn.ddata = function(regex) { 
 
    var objs = []; 
 
    this.each(function() { 
 
    var obj = {}; 
 
    for (var prop in this.dataset) 
 
     if (regex.test(prop)) 
 
     obj[prop] = this.dataset[prop]; 
 
    objs.push(obj); 
 
    }); 
 
    return objs; 
 
}; 
 

 
var conf = $('.class').ddata(/^conf/); 
 

 
console.log(conf);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="class" data-mark-comp="comp1" data-conf-property1="p1" data-conf-property2="p2" data-conf-property3="p3"></div>

Answer 2

Sie können alle Elemente iterieren, die Teil des .class div sind und eine Reihe von Attributen für den betreffenden erstellen Verwendung Einträge:

var conf= []; 
    $(".class").each(function() { 
    $.each(this.attributes, function() { 
     if (this.name.substring(0, 5)=='data-') {   
     conf[this.name.substring(5)]= this.value; 
     } 
    }); 
    }); 

Hier ist eine fiddle der oben mit Kommentaren.

Oder einfach BenGs nette Version eines Eigenschaftsselektors mit variablen Attributnamen verwenden.

Answer 3

Wenn Sie den Quellcode ändern kann, würde ich all das in einem einzigen data Attribut setzen gerade:

<div class="class" data-conf="{ property1: 'p1', property2: 'p2' }"> 

Because Auszug:

Wenn das Datenattribut ist ein Objekt (beginnt mit '{') oder array (beginnt mit '['], dann wird jQuery.parseJSON verwendet, um die Zeichenkette zu analysieren; Es muss einer gültigen JSON-Syntax folgen, einschließlich der Namen von Anführungszeichen. Wenn der Wert nicht als JavaScript-Wert analysiert werden kann, wird er als Zeichenfolge beibehalten.

So wird es wahnsinnig einfacher zu arbeiten.

Answer 4

Sie können dies tun:

var data = $(".class").data(); 
 
var conf = {}; 
 
$.each(data, function(key, value) { 
 
    if(key.startsWith("conf")) conf[key]=value; 
 
}); 
 
console.log(conf); // just for verification -- comment this line afterwards

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="class" data-mark-comp="comp1" data-conf-property1="p1" data-conf-property2="p2" data-conf-property3="p3"> 
 
</div>