Shopify jQuery 页面按 id 抓取导航标题

Question

我有一个 Shopify 网站有很长的博客文章，我正在寻找一种基于 H2 标签为博客页面模板左侧的文章创建导航的方法。

我使用了一些简单的jQuery和id来链接到页面的不同部分。这是我到目前为止所拥有的。

网页(模板(

  <div class="col-md-3">
    <ul class="article-nav">
      <li><a href="{{ article.url }}/#g1" alt="" id="title1">Group 1</a></li>
      <li><a href="{{ article.url }}/#g2" alt="" id="title2">Group 2</a></li>
      <li><a href="{{ article.url }}/#g3" alt="" id="title3">Group 3</a></li>
      <li><a href="{{ article.url }}/#g4" alt="" id="title4">Group 4</a></li>
    </ul>
  </div>
  <div class="col-md-9">
    {{ article.content }}
  </div>

现在这是博客文章本身的代码

<h2 id="g1">This is my first title</h2>
<p>Some content ...</p>
<h2 id="g2">This is my second title</h2>
<p>Some content ...</p>
...

这是我必须将它们放在一起的jQuery

var tr1 = $(g1).text();
var tr2 = $(g2).text();
var tr3 = $(g3).text();
var tr4 = $(g4).text();
$(title1).html( tr1 );
$(title2).html( tr2 );
$(title3).html( tr3 );
$(title4).html( tr4 );

我不是javascript或jQuery的专家。有没有办法简化这段代码？看起来我现在写得太多了，可以收紧。

Answer 1

with jquery：

$(document).ready(function(){
    var rows = 4;//quantity of articles
    for(i = 1; i <= 4; i++ ){
      var txt = $('#g'+i).text();
      $('#title'+i).html(txt);
    }
})