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>

Answer 2

您可以按其类获取所有部分，并使用.each()遍历它们。在每个section处都可以得到id，并在导航中构造相关的列表项。最后，您可以使用.navigation将生成的字符串添加到.html() div中。

看看下面的工作示例：

let generated = '<ul>';
$('.section').each((i, {id}) => {
  generated += `<li><a href="#${id}">Section ${i+1}</a></li>`;
})
generated += '</ul>';
$('.navigation').html(generated);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="section1">
  <p>...</p> 
</div>
<div class="section" id="section2">
  <p>...</p> 
</div>
<div class="section" id="section3">
  <p>...</p> 
</div>


<!-- To generate -->
<div class="navigation">
</div>

Answer 3

使用jquery创建.navigation元素并循环浏览.section，在循环中使用.append()添加每个定位标记

var $nav = $('<div class="navigation"><ul></ul></div>');
$(".section").each(function(i){
  $nav.find("ul").append('<li><a href="#'+this.id+'">Section '+(i+1)+'</a></li>');
});
$("body").append($nav);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="section1">
  <p>...</p> 
</div>
<div class="section" id="section2">
  <p>...</p> 
</div>
<div class="section" id="section3">
  <p>...</p> 
</div>

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

3 个答案: