代码之家  ›  专栏  ›  技术社区  ›  Bradley

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

  •  0
  • Bradley  · 技术社区  · 6 年前

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

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

    3 回复  |  直到 6 年前
        1
  •  2
  •   Oleg Nurutdinov Full Heleno    6 年前

    您可以尝试使用此代码:

    <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>
    
        2
  •  2
  •   Nick Parsons Felix Kling    6 年前

    您可以按类获取所有部分,并使用 .each() . 在每个 section 你可以得到它 id 并在导航中构建相关的列表项。最后,可以将生成的字符串添加到 .navigation DIV使用 .html() .

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

    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>
        3
  •  1
  •   Mohammad DefenestrationDay    6 年前

    创造 .navigation 元素使用jquery并循环通过 .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>