如何将自定义数据为 'x' 的 div 匹配到具有相同值 'x' 的 json 对象？

Question

我不确定这是否可以实现。

我有一个 li 的列表，它们都有一个具有唯一值的自定义属性。我还有一个包含对象列表的 JSON 文件。每个对象都有一个具有相同值的特定字段

问题： 我正在尝试将 li 属性 'x' 与 JSON 中的值 'x' 匹配。如果该匹配正确，我想获取与 'x' 相同的对象内的所有字段，并将其放置在具有属性 'x'.

的 li 内

请帮忙，我不知道如何开始。我需要一些示例甚至一个 jsfiddle 示例。

JSON结构

[
    {
        "word": "hello",
        "favnumber": "0070",
        "item": "item1",
        "color": "red"
   },
   {
        "word": "hello world",
        "favnumber": "0233070",
        "item": "item2",
        "color": "blue"
   },
   {
        "word": "hello mom",
        "favnumber": "0070",
        "item": "item3",
        "color": "pink"
   },
   {
        "word": "hello dad",
        "favnumber": "0070",
        "item": "item4",
        "color": "silver"
   }

]

HTML结构

<div>

  <li data-item="item1">1</li>
  <li data-item="item2">2</li>
  <li data-item="item3">3</li>
  <li data-item="item4">4</li>

</div>

HTML 新结构

<div>

  <li data-item="item1">hello , 0070, item1, red</li>
  <li data-item="item2">hello world, 0233070, item2, blue</li>
  <li data-item="item3">hello mom, 231213, item3, pink</li>
  <li data-item="item4">hello dad, 007021312, item4, silver</li>

</div>

Answer 1

您可以将整个任务拆分为简单的子步骤：

查询 DOM 树以提取具有特定属性的元素（在您的例子中，[data-item=*]）。
对于每个元素，获取 data-item 属性的值。
遍历表示数组的 JSON 对象，以找到该数组中与上一步找到的 DOM 元素相对应的元素。
将 DOM 元素的子文本节点替换为任意值。

让我们来看看它。

查询 DOM 树以查找具有特定属性的元素

这是在 document.querySelectorAll DOM API 的帮助下实现的。该方法将选择器作为其第一个参数，与您在 CSS:

中编写的内容非常相似

var items = document.querySelectorAll('[data-item]');

现在，在 items 变量中，您有 NodeList 个元素。第一步完成。

获取每个元素的属性值

这很简单，可以用类似

的东西来完成

var name = items[0].getAttribute('data-item');

现在 name 变量存储了一个表示 [data-item] 的属性值的字符串。

因为你有一个 NodeList 元素的数组，你必须遍历它：

for (var e in items) {
    var element = items[e];
    var name = element.getAttribute('data-item');
    //...
}

根据元素的属性值查找数据数组中的元素

现在你必须把一个循环放到一个循环中，这样你才能找到一个与该元素一致的元素。

像这样：

for (var e in items) {
    var element = items[e];
    var name = element.getAttribute('data-item');

    for (var i in data) {
        var item = data[i];
        // ...
    }
}

此处，item 变量存储一个对象，它是初始 JSON 数组中的众多对象之一（在此特定示例中名为 data）。

接下来，您必须检查 item 是否是您需要的。在你的情况下，

if (name == item.item) {
    //...
}

因为 item 的属性 item 存储的值必须与 DOM 元素的 [data-item] 属性的值一致。

现在，终于……

替换值

您可能需要更具体的任务，但此示例显示了一个简单的 element.innerText 替换。

让我们假设您在 if 语句中并且其条件评估为真。接下来，你想做一些像

var text = [];
text.push(item.word);
text.push(item.favnumber);
text.push(item.item);
text.push(item.color);

element.innerText = text.join(", ");

基本上就是这样。

您可以在 fiddle 中看到整个片段的工作原理：http://jsfiddle.net/3r4rmLth/

如何将自定义数据为 'x' 的 div 匹配到具有相同值 'x' 的 json 对象？

How to do a match with div with a custom-data of 'x' to a json object with the same value of 'x'?

json

each

matching

查询 DOM 树以查找具有特定属性的元素

获取每个元素的属性值

根据元素的属性值查找数据数组中的元素

替换值

如何将自定义数据为 'x' 的 div 匹配到具有相同值 'x' 的 json 对象？

How to do a match with div with a custom-data of 'x' to a json object with the same value of 'x'?

json

each

matching

查询 DOM 树以查找具有特定属性的元素

获取每个元素的属性值

根据元素的 属性 值查找数据数组中的元素

替换值

根据元素的属性值查找数据数组中的元素