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 添加一个 class。我无法访问原始代码，因此我需要使用 Jquery 来执行此操作。不幸的是，没有唯一的 class 来过滤掉这些，唯一唯一的是展示产品，但正如您所看到的，它是数据属性中对象的一部分，我无法弄清楚如何访问它。

如果属性 data-section-xxxxxx 相同，这会容易得多，但每个 div 在末尾都有一个唯一值，但第一部分 data-section- 始终相同。

我可以用这个遍历 divs:

$('.section').each(function(){
    for(data in $(this).data())
        console.log(data); 
});

但我想不出一种方法来仅过滤掉类型为 showcase-product 的 div。

我也尝试了不同的方法：

$( ".section" ).each(function( i ) {
    element=this;
    $.each(this.attributes, function() {
       if(this.name.indexOf('data-section') != -1) 
           $(element).addClass("myClass");
    });
});

这会添加 class，但也会将其添加到没有 type = showcase-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>

Jquery 访问数据属性为子字符串的属性

Jquery access attributes where the data attribute is substring

javascript

jquery

attributes