如何通过前缀获取所有data- *属性 [英] How to get all data-* attributes by Prefix

问题描述

我有这样的标签：

 < a href =＃id =ssddata-toggle =popoverdata-info1 =demo text：1data-info2 =demo text：2data-info3 =demo text3> Link< / a> 
  

当我点击此链接时，我有这样的功能

  $（'＃ssd'）。click（function（event）{
 var customData; 
 //获取所有自定义数据的代码格式如data-info * 
}）; 
  

注意，data-info * like属性可以是任意数字，这意味着你可以看到1个其中，名为data-info1，或名称为data-info1，data-info2，data-info3。

我怎么做，我抬起头来JQuery选择器，类似于属性开始选择器[名称^ =值]将不起作用，因为这里的变化是在名称...

如果我 console.log（$（'＃ssd'）。data（））; 我将获得一个具有我不需要的额外属性的对象，切换：popover，bs.popover：Popover

有任何建议吗？

这就是我做的：

  dataFullList = $（this）.data（）; 
 $ .each（dataFullList，function（index，value）{
 if（index！==toggle&& index！==bs.popover）{
 item .name = value.split（：）[0]; 
 item.number = value.split（：）[1]; 
 dataIWant.push（item）; 
 } 
}）; 
  

所以我将获得一个 dataIWant 数组我不需要的东西。

解决方案

定位数据的所有元素 - * 以

开头

自定义jQuery选择器选择器：dataStartsWith（）

这是一个自定义jQuery选择器，可以帮助你：

给出 数据 - foo-bar 前缀，目标以下元素：

data-foo-bar

data-foo-bar-baz

但不：

data-foo-someting

data-something

  jQuery.extend（jQuery.expr [' ：']，{dataStartsWith：function（el，i，p，n）{var pCamel = p [3] .replace（/  - （[az]）/ ig，function（m，$ 1）{return $ 1。 toUpperCase（）; }）; return Object.keys（el.dataset）.some（function（i，v）{return i.indexOf（pCamel）> -1;}）; }}）; //使用：$（'p：dataStartsWith（foo-bar）'）。css（{color：red}）; //获取数据属性列表：$（'p：dataStartsWith（foo-bar）'）。each（function（i，el）{console.log（el.dataset）;}）;  

 < script src =https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script><p data-foo-bar =a>我有data-foo-bar< / p>< p data-foo-bar-baz =bdata-extra =bbb>我有data-foo-bar-baz< / p>< p data-bar =a>我有数据栏请勿选择我< / p>< p data-something =b>我有数据 - 请勿选择我< / p>  

自定义jQuery方法 $（）。dataStartsWith（）

< pre class =snippet-code-js lang-js prettyprint-override> $。fn.dataStartsWith = function（p）{var pCamel = p.replace（/ - （[az]）/ ig ，function（m，$ 1）{return $ 1.toUpperCase（）;}）; return this.filter（function（i，el）{return Object.keys（el.dataset）.some（function（v）{return v.indexOf（pCamel）> -1;}）;}）;}; $ （ 'p'）dataStartsWith（ 富杆）的CSS（{色 红}）。。

 < script src =https：// ajax。 googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><p data-foo-bar =a>我有data-foo-bar< / p>< p data-foo-bar-baz =bdata-extra =bbb>我有data-foo-bar-baz< / p>< p data-bar =a>我有数据栏请勿选择我< / p>< p data-something =b>我有数据 - 请勿选择我< / p>  

I have a tag like this:

<a href="#" id="ssd" data-toggle="popover" data-info1="demo text: 1" data-info2="demo text: 2" data-info3="demo text3">Link</a>

When I click this link, I have a function like this

$('#ssd').click(function (event) {
    var customData;
    // Code to get all the custom data in format like data-info*
});

Note, the data-info* like attributes could be any number, that means you could see 1 one of them, named data-info1, or there of them, named data-info1, data-info2, data-info3.

How would I do that, I looked up the JQuery selectors, something like Attribute Starts With Selector [name^="value"] won't work because the variation here is on name...

If I console.log($('#ssd').data()); I will get an object with extra attributes that I don't need, toggle: "popover", bs.popover: Popover

Any suggestions?

This is what I did:

dataFullList = $(this).data();
$.each(dataFullList, function (index, value) {
    if (index !== "toggle" && index !== "bs.popover") {
        item.name = value.split(":")[0];
        item.number = value.split(":")[1];
        dataIWant.push(item);
    }
});

So I will get a dataIWant array without stuff I don't need.

解决方案

Target all elements which data-* starts with

Custom jQuery selector selector:dataStartsWith()

Here's a custom jQuery selector that will help you to:

Given the data-foo-bar prefix , target the following elements:

data-foo-bar
data-foo-bar-baz

but not:

data-foo-someting
data-something

jQuery.extend(jQuery.expr[':'], { 
  "dataStartsWith" : function(el, i, p, n) {  
    var pCamel = p[3].replace(/-([a-z])/ig, function(m,$1) { return $1.toUpperCase(); });
    return Object.keys(el.dataset).some(function(i, v){
      return i.indexOf(pCamel) > -1;
    });
  }
});


// Use like:
$('p:dataStartsWith(foo-bar)').css({color:"red"});  

// To get a list of data attributes:
$('p:dataStartsWith(foo-bar)').each(function(i, el){
  console.log( el.dataset );
});

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

<p data-foo-bar="a">I have data-foo-bar</p>
<p data-foo-bar-baz="b" data-extra="bbb">I have data-foo-bar-baz</p>
<p data-bar="a">I have data-bar DON'T SELECT ME</p>
<p data-something="b">I have data-something DON'T SELECT ME</p>

Custom jQuery Method $().dataStartsWith()

$.fn.dataStartsWith = function(p) {
  var pCamel = p.replace(/-([a-z])/ig, function(m,$1) { return $1.toUpperCase(); });
  return this.filter(function(i, el){
    return Object.keys(el.dataset).some(function(v){
      return v.indexOf(pCamel) > -1;
    });
  });
};


$('p').dataStartsWith("foo-bar").css({color:"red"});  

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

<p data-foo-bar="a">I have data-foo-bar</p>
<p data-foo-bar-baz="b" data-extra="bbb">I have data-foo-bar-baz</p>
<p data-bar="a">I have data-bar DON'T SELECT ME</p>
<p data-something="b">I have data-something DON'T SELECT ME</p>

这篇关于如何通过前缀获取所有data- *属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！