javascript - 如何正确地将 JSON 文件中的重新格式化值放入其各自的父级中

Question

问题

所有重新格式化的值都被放入相同的第一个 block 引用中，而不是它们自己的父引用中

---

问题

如何重新格式化我的代码以仅正确显示其父 block 引用内的相应子项？

JS

var brewer = document.getElementsByClassName('author-raw');
for (var contrib = 0; contrib < brewer.length; contrib++) {
  var matches = brewer[contrib].innerHTML.match(/(.*)\s\<([a-z]*)\>/);
  var output = `${matches[1]} <a href="https://www.twitter.com/${matches[2]}" target="_blank">@${matches[2]}</a>`;
  document.querySelector('blockquote cite').innerHTML += output;
}

演示

可在 CodePen 上获取工作演示

HTML 示例

<blockquote>
  <p>Allow the bay leaves to steep in the boil for extra time to extract some bitterness. The bitterness is really important to bring balance to an otherwise sweet beer.</p>
  <div class="author">
    <span class="author-raw" aria-hidden="true">Sam Mason <samjbmason></span>
    <cite></cite>
  </div>
</blockquote>

---

背景

在我的应用程序中使用 Vue 和 Axios，我正在点击 punkapi 来获取啤酒列表，其中包括酿酒师的提示。对于酿酒商的名称，我得到一个原始 JSON 值，例如

"contributed_by":"Sam Mason <samjbmason>"

第一部分是名称，第二部分是 Twitter 用户名。我已经能够采用这些值并将其重新格式化为名称和链接的 Twitter 帐户。生成的innerHTML现在类似于

Sam Mason <a href="https://www.twitter.com/samjbmason" target="_blank"> samjbmason</a>

Answer 1

您可以更新此行

document.querySelector('blockquote cite').innerHTML += output;

到此

brewer[contrib].closest('div').querySelector('cite').innerHTML = output;

querySelector 将从其初始 span 开始，向上一步，到达 div 父级，然后选择一个 cite，这将是每个 span 的兄弟。

已更新codepen

堆栈片段

var brewer = document.getElementsByClassName('author-raw');
for (var contrib = 0; contrib < brewer.length; contrib++) {
  var matches = brewer[contrib].innerHTML.match(/(.*)\s\<([a-z]*)\>/);
  var output = `${matches[1]} <a href="https://www.twitter.com/${matches[2]}" target="_blank">@${matches[2]}</a>`;
  brewer[contrib].closest('div').querySelector('cite').innerHTML = output;
}

.author-raw {
  display: none;
}
cite {
  display: block;
}

<section>
  <blockquote>
    <p>Wheat and flaked oats can help to add to the body of the beer. This makes up for the lack of alcoholic bite.</p>
    <div class="author">
      <span class="author-raw" aria-hidden="true">Lars Gregori <choas></span>
      <cite></cite>
    </div>
  </blockquote>
    
  <blockquote>
    <p>Mash the blueberries before adding to the kettle. This will help with flavour extraction and turning your wort a nice shade of purple.</p>
    <div class="author">
      <span class="author-raw" aria-hidden="true">Ali Skinner <AliSkinner></span>
      <cite></cite>
    </div>
  </blockquote>  
    
  <blockquote>
    <p>Be careful with the Motueka additions. It has an intense citrus character that is often tempered by using in conjunction with other hops.</p>
    <div class="author">
      <span class="author-raw" aria-hidden="true">Matt Ball <GeordieMatt></span>
      <cite></cite>
    </div>
  </blockquote>
  <blockquote>
    <p>Allow the bay leaves to steep in the boil for extra time to extract some bitterness. The bitterness is really important to bring balance to an otherwise sweet beer.</p>
    <div class="author">
      <span class="author-raw" aria-hidden="true">Sam Mason <samjbmason></span>
      <cite></cite>
    </div>
  </blockquote>
</section>

---

另一个选择，也许更好，可能是使用 nextElementSibling

brewer[contrib].nextElementSibling.innerHTML = output;

var brewer = document.getElementsByClassName('author-raw');
for (var contrib = 0; contrib < brewer.length; contrib++) {
  var matches = brewer[contrib].innerHTML.match(/(.*)\s\<([a-z]*)\>/);
  var output = `${matches[1]} <a href="https://www.twitter.com/${matches[2]}" target="_blank">@${matches[2]}</a>`;
  brewer[contrib].nextElementSibling.innerHTML = output;

}

.author-raw {
  display: none;
}
cite {
  display: block;
}

<section>
  <blockquote>
    <p>Wheat and flaked oats can help to add to the body of the beer. This makes up for the lack of alcoholic bite.</p>
    <div class="author">
      <span class="author-raw" aria-hidden="true">Lars Gregori <choas></span>
      <cite></cite>
    </div>
  </blockquote>
    
  <blockquote>
    <p>Mash the blueberries before adding to the kettle. This will help with flavour extraction and turning your wort a nice shade of purple.</p>
    <div class="author">
      <span class="author-raw" aria-hidden="true">Ali Skinner <AliSkinner></span>
      <cite></cite>
    </div>
  </blockquote>  
    
  <blockquote>
    <p>Be careful with the Motueka additions. It has an intense citrus character that is often tempered by using in conjunction with other hops.</p>
    <div class="author">
      <span class="author-raw" aria-hidden="true">Matt Ball <GeordieMatt></span>
      <cite></cite>
    </div>
  </blockquote>
  <blockquote>
    <p>Allow the bay leaves to steep in the boil for extra time to extract some bitterness. The bitterness is really important to bring balance to an otherwise sweet beer.</p>
    <div class="author">
      <span class="author-raw" aria-hidden="true">Sam Mason <samjbmason></span>
      <cite></cite>
    </div>
  </blockquote>
</section>