如何使用jQuery查找并选择所有带有特定单词开头的数据属性的元素？

Question

我希望能够使用jQuery查找并选择所有具有以"data-qu"开头的数据属性的元素，这些元素位于包装器div下。我该如何实现？ 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') 或类似的方式？

- midstack

Answer 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;
});

- Piotr Czarnecki

Answer 2

参考：jQuery属性名称包含

你可以像这样操作。

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

  return false;
});​

- Raghavendra

Answer 3

尝试使用.filter()、test()和Object.keys()来提高IT技术水平。

$(".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>

- guest271314

---

为什么你可以直接使用元素本身的HTML来匹配？ - Raghavendra

@Raghavendra：“为什么不直接使用元素本身的HTML呢？” 不确定是否正确理解评论？ - guest271314

@guest271314 $('.wrapper *') 通用选择器会导致性能低下吗？如果我们像 CSS 选择器那样思考 - midstack

我是说你可以匹配'<div data-qu-lw="1"></div>'。match(/qu.*?>/)。为什么对象的键是所有东西。 - Raghavendra

@Raghavendra jQueryзҡ„.data()е°Ҷdata-*еұһжҖ§еӯҳеӮЁдёәе…·жңүй”®/еҖјеҜ№зҡ„ObjectеҜ№иұЎпјӣе…¶дёӯkeyжҳҜеҗҚз§°жҲ–data-*зҡ„*пјӣдҫӢеҰӮпјҢqu-lwгҖӮ - guest271314