Question

body标签内的内容如下所示：

<div class="list_container">
  <ul class="list_content">
      <li style="display: none;" class="first"></li>
  </ul>
</div>
<div class="box_wrapper">

<section id="about" class="scroller">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus dignissimos voluptas quisquam, quaerat, illum animi fuga nihil nesciunt assumenda cupiditate consectetur ipsam officia magni reiciendis nisi dolor natus autem consequatur.</section>
<section id="product" class="scroller">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate repellendus inventore molestias tempore distinctio natus cumque voluptatibus ullam blanditiis dicta, a, porro eum, modi nobis aliquam voluptatum voluptates repudiandae sunt?</section>
<section id="services" class="scroller">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis totam id consectetur mollitia inventore distinctio corporis eius impedit commodi. Voluptas, dicta non. Reprehenderit aperiam perferendis labore beatae veritatis tenetur harum.</section>
</div>

我想遍历使用类滚动器的所有部分，然后打印带有标签的列表项。每个标签都将其各自部分的ID用作href。

我正在设法打印列表项，但是由于某种原因，它以相反的顺序打印。

例如：
部分具有ID或
部分具有服务ID

列表的顺序应相同：

<li><a class='bullet' href="#about">Test</a></li>
<li><a class='bullet' href="services">Test</a></li>

但是，在我这边，当我检查页面时，它会反向打印：

<li><a class='bullet' href="services">Test</a></li>
<li><a class='bullet' href="#about">Test</a></li>

我的js：

$(document).ready(function() {

    var numItems = $('.scroller').length;

    $('.scroller').each(function(){
        console.log($(this).val());
        console.log($(this).attr('id'));
        var getId = $(this).attr('id');
        $( "<li><a class='bullet' href='#" + getId +"'>Test</a></li>" ).insertAfter( "li.first" );
    });
    console.log(numItems);    
});

已更新：

要突出显示点击时的每个项目符号，我执行了以下操作：

$("li a.bullet").on('click', function(){
    $('li a.bullet').removeClass('active');
    $(this).addClass('active');
});

如何在鼠标滚动和/或垂直滚动条上突出显示项目符号？因此，如果我在“关于”部分下，则应突出显示第一个项目符号，依此类推。

可以找到我的更新笔here with the full code

为什么每个循环以相反的顺序打印

0 个答案: