Question

我有div标签，如下面的

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

我想创建一个由data-conf-*属性

组成的对象

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

我尝试了上述内容，但它包含了我根据我的要求不需要的所有属性。

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

Answer 1

一种方法是创建自己的插件。

这个接受正则表达式与属性进行比较： -

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以迭代属于.class div的所有元素，并使用以下方法为相关条目创建属性数组：

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

以上是fiddle上述评论。

或者只是使用BenG的带有可变属性名称的属性选择器的漂亮版本。

Answer 3

如果你可以改变源代码，我会把它全部放在一个data属性中：

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

Because摘录：

当data属性是一个对象（以＆＃39; {＆＃39;开头）或数组（以＆＃39; [＆＃39;开头）时，jQuery.parseJSON用于解析字符串;它必须遵循有效的JSON语法，包括引用的属性名称。如果该值不能作为JavaScript值进行解析，则将其保留为字符串。

因此，使用它变得非常容易。

Answer 4

你可以这样做：

＆＃13;

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

＆＃13;

<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>

＆＃13;

将特定命名约定数据属性保存到对象中

4 个答案: