Javascript 根据文档中的顺序定位目标对列表元素进行排序

由于标题听起来可能令人困惑，我试图将其分解为一个简单的案例描述，希望能让这一点更清楚

我有一个一页的情况与不同的部分。每个部分都有其唯一的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的顺序动态创建列表元素？

使用jquery创建

.navigation

元素并通过

.section

，在循环中使用

.append（）添加每个锚定标记


var$nav=$（'
'）；
$（“.section”）。每个（功能（i）{
$nav.find（“ul”）.append（“
”）；
});
$（“正文”）。追加（$nav）

…

…

…

使用jquery创建
.navigation
元素，并在
中循环。在循环中，使用
添加每个锚定标记。append（）


var$nav=$（'
'）；
$（“.section”）。每个（功能（i）{
$nav.find（“ul”）.append（“
”）；
});
$（“正文”）。追加（$nav）

…

…

…

您可以尝试使用以下代码：

<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>







$（文档）.ready（函数（）{
$（'.section'）。每个（函数（i，元素）{
$（'.navigation ul'）。追加（'
'）；
});
});
您可以尝试使用以下代码：

<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>







$（文档）.ready（函数（）{
$（'.section'）。每个（函数（i，元素）{
$（'.navigation ul'）。追加（'
'）；
});
});
您可以按其类获取所有部分，并使用
.each（）
循环它们。在每个
部分
可以获取它的
id
，并在导航中构建相关的列表项。最后，您可以使用
.html（）
将生成的字符串添加到
.navigation
div

请看下面的一个工作示例：


let generated='
'；
$（'.section'）。每个（（i，{id}）=>{
生成+=`
`；
})
生成+='
'；
$（'.navigation'）.html（已生成）

…

…

…

您可以按其类获取所有部分，并使用
.each（）
循环它们。在每个
部分
可以获取它的
id
，并在导航中构建相关的列表项。最后，您可以使用
.html（）
将生成的字符串添加到
.navigation
div

请看下面的一个工作示例：


let generated='
'；
$（'.section'）。每个（（i，{id}）=>{
生成+=`
`；
})
生成+='
'；
$（'.navigation'）.html（已生成）

…

…

…

谢谢大家！奥列格的解决方案立即奏效，完全符合我的要求！谢谢大家!！奥列格的解决方案立即奏效，完全符合我的要求！