如何使用 jquery 查找并选择所有具有 data 属性以特定单词开头的元素？答案

【问题标题】：How can I find and select all elements which have data attribute start with specific word with using jquery?如何使用 jquery 查找并选择所有具有 data 属性以特定单词开头的元素？
【发布时间】：2015-11-25 14:02:27
【问题描述】：

我想在包装器 div 下查找并选择所有数据属性以“data-qu”开头的元素。如何使用 jquery 做到这一点？

HTML

<div class="wrapper">
    <div data-qu-lw="1"></div>
    <div data-qu-md="2"></div>
    <div data-res-kl="1"></div>
    <div data-qu-lg="3"></div>
</div>

有没有办法选择这些，比如$('.wrapper').find('^data-qu') 或类似的？

【问题讨论】：

标签： javascript jquery html jquery-selectors custom-data-attribute

【解决方案1】：

var filteredElements = $('.wrapper > div').filter(function(){
  var attrs = this.attributes;
  for (var i=0; i<attrs.length; i++) {
      if (attrs[i].name.indexOf("data-qu")==0) return true;
  }         
  return false;
});

【讨论】：

【解决方案2】：

参考：jQuery attribute name contains

你可以这样做。

$('.wrapper div').filter(function() {
  for (var property in $(this).data()) {
    if (property.indexOf('data-qu') == 0) {
      return true;
    }
  }

  return false;
});

【讨论】：

【解决方案3】：

尝试使用.filter()、test()、Object.keys()

$(".wrapper *").filter(function() {
  return /^qu/.test(Object.keys($(this).data())[0])
}).css("color", "aqua")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
    <div data-qu-lw="1">1</div>
    <div data-qu-md="2">2</div>
    <div data-res-kl="1">1</div>
    <div data-qu-lg="3">3</div>
</div>

【讨论】：

为什么可以直接使用元素本身的html来匹配
@Raghavendra "为什么你可以直接使用元素本身的html然后"不确定正确解释注释？
@guest271314 $('.wrapper *') 通用选择器会导致性能低下吗？如果我们像 CSS 选择器一样思考
我的意思是你可以匹配'
'.match(/qu.*?>/)。为什么对象是所有事物的关键
@Raghavendra jQuery .data() 将 data-* 属性存储为 Object 具有键/值对；其中key 是名称，或* of data-*；例如，qu-lw