jQuery访问属性，其中数据属性是子字符串

Question

感谢一百万花时间阅读本文 :) 首先让我向您展示我正在处理的示例代码：<div id="section-0000001" class="section" data-section-223344="{"id":"123456", "type":"product"}">  <div>Section 0000001</div></div><div id="section-0000002" class="section" data-section-223344="{"id":"123456", "type":"category"}">  <div>Section 0000002</div></div><div id="section-123456" class="section" data-section-223344="{"id":"123456", "type":"showcase-product"}">  <div>Section 123456</div></div><div id="section-234567" class="section" data-section-223344="{"id":"234567", "type":"showcase-product"}">  <div>Section 234567</div></div><div id="section-345678" class="section" data-section-223344="{"id":"345678", "type":"showcase-product"}">  <div>Section 345678</div></div><div id="section-0000003" class="section" data-section-223344="{"id":"123456", "type":"image"}">  <div>Section 0000003</div></div>我想要实现的是为所有类型为“showcase-product”的 div 添加一个类。我无权访问原始代码，因此我需要使用 Jquery 执行此操作。不幸的是，没有一个独特的类可以过滤掉这些，唯一独特的是展示产品，但正如您所见，它是数据属性中对象的一部分，我不知道如何访问它。如果属性 data-section-xxxxxx 相同，这会容易得多，但每个 div 都有一个唯一的值，但第一部分 data-section- 总是相同的。我可以用这个循环遍历div：$('.section').each(function(){    for(data in $(this).data())        console.log(data); });但是我想不出一种方法来只过滤掉 type = show-product 的 div。我还尝试了另一种方法：$( ".section" ).each(function( i ) {    element=this;    $.each(this.attributes, function() {       if(this.name.indexOf('data-section') != -1)            $(element).addClass("myClass");    });});这会添加类，但也会将其添加到没有 type = show-product 的类，例如 type = image 或 type = category。我想它可能是这样的this.name.type.value.indeOf('data-section') != 1 但我不确定正确的语法或如何访问它，特别是因为类型不是值，它是值中的一个对象。任何帮助表示赞赏。

Answer 1

见这种方法；评论中解释了它的作用：

$(".section").each(function(i, element) {

  // get dataset values

  var dataValues = Object.values(element.dataset);

  // find if has type using a regular expression

  var foundType = false;

  for (var j = 0; j < dataValues.length; j++) {

    if (dataValues[j].match(/\"type\":\"showcase-product\"/)) {

      foundType = true; // one dataset value matched!

    }

  }

  // skip this element if no match

  if (!foundType) return;

  // do your stuff with showcase-product here:

  console.log(element, 'found!');

  $(element).addClass("myClass");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="section-0000001" class="section" data-section-223344='{"id":"123456", "type":"product"}'>

<div>Section 0000001</div>

</div>

<div id="section-0000002" class="section" data-section-223344='{"id":"123456", "type":"category"}'>

<div>Section 0000002</div>

</div>

<div id="section-123456" class="section" data-section-223344='{"id":"123456", "type":"showcase-product"}'>

<div>Section 123456</div>

</div>