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

Question

问题

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

---

问题

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

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>

Answer 2

可以通过parentNode完成

brewer[contrib].parentNode.parentNode.innerHTML += output;