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) {&nbsp; // get dataset values&nbsp; var dataValues = Object.values(element.dataset);&nbsp; // find if has type using a regular expression&nbsp; var foundType = false;&nbsp; for (var j = 0; j < dataValues.length; j++) {&nbsp; &nbsp; if (dataValues[j].match(/\"type\":\"showcase-product\"/)) {&nbsp; &nbsp; &nbsp; foundType = true; // one dataset value matched!&nbsp; &nbsp; }&nbsp; }&nbsp; // skip this element if no match&nbsp; if (!foundType) return;&nbsp; // do your stuff with showcase-product here:&nbsp; console.log(element, 'found!');&nbsp; $(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>