javascript - 根据 anchor 目标在文档中的顺序对列表元素进行排序

Question

由于标题可能听起来令人困惑，我试图将其分解为对案例的简单描述，以期使这一点更加清晰。

我有一个包含不同部分的一页情况。每个部分都有其唯一的 ID。

<div class="section" id="section1">
  <p>...</p> 
</div>
<div class="section" id="section2">
  <p>...</p> 
</div>
<div class="section" id="section3">
  <p>...</p> 
</div>
...

此外，我想要一个简单的导航，其中包含指向这些部分及其 ID 的链接。

<div class="navigation">
    <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        ...
    </ul>
</div>

该部分的顺序是可以互换的，我希望生成导航。有没有办法根据其 href 指向的部分 ID 的顺序动态创建列表元素？

Answer 1

您可以尝试使用此代码:

<div class="section" id="section1">
    <p>...</p>
</div>
<div class="section" id="section2">
    <p>...</p>
</div>
<div class="section" id="section3">
    <p>...</p>
</div>


<div class="navigation">
    <ul>
    </ul>
</div>

<script>
    $(document).ready(function () {

        $('.section').each(function (i, elem) {
            $('.navigation ul').append('<li><a href="#' + $(elem).attr('id') + '">Section ' + i+1 + '</a></li>');
        });
    });
</script>