时间戳

首页 > 解决方案 > 如何将 for 循环的项目与标签的每个值进行比较？

javascript - 如何将 for 循环的项目与标签的每个值进行比较？

问题描述

我需要将每个值<p>与 for 循环中的项目进行比较：

<div class="domtom-container">

   <div class="svg-martinique" dataset-interval="">
      <p> Martinique </p>
   </div>


   <div class="svg-nouvelle-caledonie" dataset-interval="">
      <p> Nouvelle-Calédonie </p>
   </div>


   <div class="svg-francais-de-l-etranger" dataset-interval="">
      <p> Français de l’étranger </p>
   </div>


   <div class="svg-guyane" dataset-interval="">
      <p> Guyane </p>
   </div>


   <div class="svg-polynesie-francaise" dataset-interval="">
      <p> Polynésie française </p>
   </div>


   <div class="svg-parlement-europeen" dataset-interval="">
      <p> Parlement européen </p>
   </div>


   <div class="svg-la-reunion" dataset-interval="">
      <p> La Réunion </p>
   </div>


   <div class="svg-st-pierre-et-miquelon" dataset-interval="">
      <p> Saint-Pierre et Miquelon </p>
   </div>


   <div class="svg-mayotte" dataset-interval="">
      <p> Mayotte </p>
   </div>


   <div class="svg-st-martin-barthelemy" dataset-interval="">
      <p> Saint-Martin/Saint-Barthélemy </p>
   </div>


   <div class="svg-guadeloupe" dataset-interval="">
      <p> Guadeloupe </p>
   </div>


   <div class="svg-walis-et-futuna" dataset-interval="">
      <p> Wallis et Futuna </p>
   </div>

</div>

在js中我做了这个，但它不起作用：

import departement_list from "../data/departements-region.json";
let myJson_departement_list,
stringified_departement_list = JSON.stringify(departement_list);
myJson_departement_list = JSON.parse(stringified_departement_list);

  for (let i in myJson_departement_list) {
    $(".domtom-container [dataset-interval]").each(function () {
        var $this = $(this);
        console.log("dept = ", myJson_departement_list[i]["dep_name"]);
        console.log("paragraph =  ", $this.find("p").html());
        if ($this.find("p").html() == myJson_departement_list[i]["dep_name"]) {
          // code here
        }
    });
  }

json 文件包含类似的内容：

[
  {
    "num_dep": "01",
    "code_dept": "AI",
    "dep_name": "Ain",
    "region_name": "Auvergne-Rhône-Alpes",
    "total_parrainages": 0,
    "color_dpt": ""
  },
  {
    "num_dep": "02",
    "code_dept": "AS",
    "dep_name": "Aisne",
    "region_name": "Hauts-de-France",
    "total_parrainages": 0,
    "color_dpt": ""
  },
  {
    "num_dep": "03",
    "code_dept": "AL",
    "dep_name": "Allier",
    "region_name": "Auvergne-Rhône-Alpes",
    "total_parrainages": 0,
    "color_dpt": ""
  },
  {
    "num_dep": "04",
    "code_dept": "AP",
    "dep_name": "Alpes-de-Haute-Provence",
    "region_name": "Provence-Alpes-Côte d'Azur",
    "total_parrainages": 0,
    "color_dpt": ""
  },
..
..
...
.
..

当我在浏览器中检查控制台日志时，我有这个：

dept =  Ain
custom-map.js:87 paragraph =    Martinique 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Nouvelle-Calédonie 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Français de l’étranger 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Guyane 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Polynésie française 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Parlement européen 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    La Réunion 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Saint-Pierre et Miquelon 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Mayotte 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Saint-Martin/Saint-Barthélemy

标签： javascripthtmlfor-loop

解决方案

以下是您在非 jquery 世界中的操作方式。您的测试数据不包括阳性病例，但是一旦您添加了这些病例，您就会看到匹配项。

const departments = [
  {
    "num_dep": "01",
    "code_dept": "AI",
    "dep_name": "Ain",
    "region_name": "Auvergne-Rhône-Alpes",
    "total_parrainages": 0,
    "color_dpt": ""
  },
  {
    "num_dep": "02",
    "code_dept": "AS",
    "dep_name": "Aisne",
    "region_name": "Hauts-de-France",
    "total_parrainages": 0,
    "color_dpt": ""
  },
  {
    "num_dep": "03",
    "code_dept": "AL",
    "dep_name": "Allier",
    "region_name": "Auvergne-Rhône-Alpes",
    "total_parrainages": 0,
    "color_dpt": ""
  },
  {
    "num_dep": "04",
    "code_dept": "AP",
    "dep_name": "Alpes-de-Haute-Provence",
    "region_name": "Provence-Alpes-Côte d'Azur",
    "total_parrainages": 0,
    "color_dpt": ""
  }
];

const paragraphs = Array.from(document.querySelectorAll('.domtom-container p')).map(domNode => domNode.innerText.trim());

const matches = {};

paragraphs.forEach(p => {

    const department = departments.filter(d => {
      return d.dep_name === p;
    }).pop() || null;

    matches[p] = department;

});
  
console.log(matches);
<div class="domtom-container">
   <div class="svg-martinique" dataset-interval="">
      <p> Martinique </p>
   </div>
   <div class="svg-nouvelle-caledonie" dataset-interval="">
      <p> Nouvelle-Calédonie </p>
   </div>
   <div class="svg-francais-de-l-etranger" dataset-interval="">
      <p> Français de l’étranger </p>
   </div>
   <div class="svg-guyane" dataset-interval="">
      <p> Guyane </p>
   </div>
   <div class="svg-polynesie-francaise" dataset-interval="">
      <p> Polynésie française </p>
   </div>
   <div class="svg-parlement-europeen" dataset-interval="">
      <p> Parlement européen </p>
   </div>
   <div class="svg-la-reunion" dataset-interval="">
      <p> La Réunion </p>
   </div>
   <div class="svg-st-pierre-et-miquelon" dataset-interval="">
      <p> Saint-Pierre et Miquelon </p>
   </div>
   <div class="svg-mayotte" dataset-interval="">
      <p> Mayotte </p>
   </div>
   <div class="svg-st-martin-barthelemy" dataset-interval="">
      <p> Saint-Martin/Saint-Barthélemy </p>
   </div>
   <div class="svg-guadeloupe" dataset-interval="">
      <p> Guadeloupe </p>
   </div>
   <div class="svg-walis-et-futuna" dataset-interval="">
      <p> Wallis et Futuna </p>
   </div>
</div>

推荐阅读