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

Question

i need to compare value of each <p> with items in for loop:

<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>

In js i made this but it does not work:

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
        }
    });
  }

the json file contains something like that:

[
  {
    "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": ""
  },
..
..
...
.
..

When i inspect the consolelog in browser, i have this:

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 

Answer 1

Here's how you would do it in a non-jquery world. Your test data includes no positive cases, but once you add those in, you'll see your matches.

 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>