如何访问每个锚点内的跨度并填充数据

Question

这就是我的HTML外观

<div data-id="1415">
  <a class="kof">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>BF</span>
      </div>
      </div>
  </a>
   <a class="bhof">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>IL</span>
      </div>
      </div>
  </a>
  <a class="thof">
      <div class="res-button res-button--thof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>Tw</span>
      </div>
      </div>
  </a>
</div>

<div data-id="1417">
  <a class="kof">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>BF</span>
      </div>
      </div>
  </a>
   <a class="bhof">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>IL</span>
      </div>
      </div>
  </a>
  <a class="thof">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>Tw</span>
      </div>
      </div>
  </a>
</div>

<div data-id="1413">
  <a class="kof">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>BF</span>
      </div>
      </div>
  </a>
   <a class="bhof">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>IL</span>
      </div>
      </div>
  </a>
  <a class="thof">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>Tw</span>
      </div>
      </div>
  </a>
</div>    

我正在尝试使用JavaScript对象中的相应数据填充span。在SO用户Crowder的帮助下，我能够达到这个目的。

const findById = id => myData.find((elem) => elem.ID == id);

$("div[data-id]").each(function() {
    const span = $(this).find("span");
    const id   = $(this).attr("data-id");
    const ob   = findById(id);
    // populate span of a.kof with ob.BF
    // populate span of a.bhof with ob.IF
    // populate span of a.thof with ob.Tw
});

我现在正尝试访问每个div中的span并使用来自对象的值填充它。

这是我正在使用的对象：

var myData =[  
   {  
       "ID":1417,
       "BF":74,
       "IL":17,
       "Tw":17
   },
   {  
       "ID":1415,
       "BF":63,
       "IL":7,
       "Tw":19
   },
   {  
       "ID":1414,
       "BF":297,
       "IL":2,
       "Tw":30
   },
   {  
       "ID":1413,
       "BF":114,
       "IL":39,
       "Tw":69
   },
   {  
       "ID":1412,
       "BF":592,
       "IL":14,
       "Tw":24
   },
   {  
       "ID":1411,
       "BF":151,
       "IL":18,
       "Tw":57
   }
]

以下是我要做的事情的演示https://jsfiddle.net/qwejzkgs/3/。任何帮助表示赞赏。

Answer 1

您可以使用.each()：

span.each(function(index, value){

    $(this).text(ob[$(this).text()]);

});

＆＃13;

＆＃13;

var myData =[  
   {  
       "ID":1417,
       "BF":74,
       "IL":17,
       "Tw":17
   },
   {  
       "ID":1415,
       "BF":63,
       "IL":7,
       "Tw":19
   },
   {  
       "ID":1414,
       "BF":297,
       "IL":2,
       "Tw":30
   },
   {  
       "ID":1413,
       "BF":114,
       "IL":39,
       "Tw":69
   },
   {  
       "ID":1412,
       "BF":592,
       "IL":14,
       "Tw":24
   },
   {  
       "ID":1411,
       "BF":151,
       "IL":18,
       "Tw":57
   }
]

const findById = id => myData.find((elem) => elem.ID == id);

$("div[data-id]").each(function() {
    const span = $(this).find("span");
    const id   = $(this).attr("data-id");
    const ob   = findById(id);
    
    span.each(function(index, value){
    	$(this).text(ob[$(this).text()]);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-id="1415">
  <a class="kof">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>BF</span>
      </div>
      </div>
  </a>
   <a class="bhof">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>IL</span>
      </div>
      </div>
  </a>
  <a class="thof">
      <div class="res-button res-button--thof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>Tw</span>
      </div>
      </div>
  </a>
</div>

<div data-id="1417">
  <a class="kof">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>BF</span>
      </div>
      </div>
  </a>
   <a class="bhof">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>IL</span>
      </div>
      </div>
  </a>
  <a class="thof">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>Tw</span>
      </div>
      </div>
  </a>
</div>

<div data-id="1413">
  <a class="kof">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>BF</span>
      </div>
      </div>
  </a>
   <a class="bhof">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>IL</span>
      </div>
      </div>
  </a>
  <a class="thof">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>Tw</span>
      </div>
      </div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;