Question

希望我能正确解释。

因此，我所拥有的是一个包含大量数据的数据属性，在这种情况下，我想查找每个单独的购物篮产品ID并将其作为单独的字符串吐出。

我一直在努力的主要事情是如何在存在的其他数据中真正找到这一点

这是我正在使用的标记：

<div class="hidden js-page-context" data-page-context="{
    &quot;basketProductIds&quot;: &quot;FZZ83047-157-16,FZZ84695-173-20&quot;,
    &quot;basketLastModified&quot;: &quot;Mon Aug 12 12:06:43 GMT 2019&quot;,
    &quot;redirectUrl&quot;: &quot;https://www.test.com&quot;
}"></div>

var test = $('.hidden').attr("data-page-context");

console.log(test);

CodePen：https://codepen.io/nickelse/pen/JgxmBb

任何帮助都会很棒：D

Answer 1

您可以使用JQuery.data()定位data-* html元素：

const test = $('.hidden').data("page-context")

console.log(test)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden js-page-context" data-page-context="{
    &quot;basketProductIds&quot;: &quot;FZZ83047-157-16,FZZ84695-173-20&quot;,
    &quot;basketLastModified&quot;: &quot;Mon Aug 12 12:06:43 GMT 2019&quot;,
    &quot;redirectUrl&quot;: &quot;https://www.test.com&quot;
}"></div>

这将为您提供一个对象，您可以轻松地访问其属性。例如，test.basketProductIds将给出相应的数据。

Answer 2

我认为解决问题的最佳方法首先是使用：转换字符串：

var test = $('.hidden').attr("data-page-context");

使用JSON.parse（test）将其转换为适当的JSON。

编辑：，如其他答案和评论所述：您可以使用：

跳过此部分。

var item= $('.hidden').data("page-context");

获取所有个人ID之后：

  var ids = item.basketProductIds.split(",");

获取ID数组。

在下面查看我的代码段。

var test = $('.hidden').attr("data-page-context"); 

var item = JSON.parse(test);
console.log(item); 

console.log("ids", item.basketProductIds);

var ids = item.basketProductIds.split(",");
console.log(ids);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden js-page-context" data-page-context="{
    &quot;basketProductIds&quot;: &quot;FZZ83047-157-16,FZZ84695-173-20&quot;,
    &quot;basketLastModified&quot;: &quot;Mon Aug 12 12:06:43 GMT 2019&quot;,
    &quot;redirectUrl&quot;: &quot;https://www.test.com&quot;
}"></div>

Answer 3

这有效

var test = $('.hidden').attr("data-page-context"); // will return the JSON
let testObj = JSON.parse(test);
console.log(testObj.basketProductIds); // The id you need

Answer 4

也许你是这个意思？

$(...).data("page-context")将返回已解析的数据-无需使用JSON.parse

下面的代码将找到所有带有js-page-context类的div，并返回在其中任何一个中找到的所有basketProductId的列表。

var list = $('.js-page-context').map(
  (_,div) => $(div).data("page-context").basketProductIds.split(",")
).get()

console.log(list);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden js-page-context" data-page-context="{
    &quot;basketProductIds&quot;: &quot;FZZ83047-157-16,FZZ84695-173-20&quot;,
    &quot;basketLastModified&quot;: &quot;Mon Aug 12 12:06:43 GMT 2019&quot;,
    &quot;redirectUrl&quot;: &quot;https://www.test.com&quot;
}"></div>
<div class="hidden js-page-context" data-page-context="{
    &quot;basketProductIds&quot;: &quot;FZZ83047-157-17,FZZ84695-173-21&quot;,
    &quot;basketLastModified&quot;: &quot;Mon Aug 12 12:06:43 GMT 2019&quot;,
    &quot;redirectUrl&quot;: &quot;https://www.test.com&quot;
}"></div>

在数据属性内查找值

4 个答案: