Используйте jQuery для автоматизации ссылок на главы на странице?

Question

Эта страница в настоящее время состоит из 3-х глав, каждая из которых содержится в их собственных тегах статьи. http://wlvrtn.com/sites/nms-chapters/page.php

В настоящее время эта страница состоит из трех глав. В будущем я добавлю дополнительные главы, а также ссылки на главы в плавающей главе nav.

То, что я хотел бы достичь:

Я хочу автоматизировать назначения главы нав ссылку через JQuery, так что первая ссылка в пунктах списка в первой статье на странице, второй ссылке указывает на вторую статью и т. д.

I.e., если я добавлю статью четвертой главы, я не хочу давать ей идентификатор «article-04»; Я хочу, чтобы четвертая ссылка в главе nav была добавлена, чтобы знать, что она должна указывать на новую статью. Я предполагаю, что «nth-child» играет в это, но я слишком незнаю.

Спасибо, XO

---

Глава Nav:

<nav id="chapters"> 
    <ul> 
    <li><a href="#">Chapter One</a></li> 
    <li><a href="#">Chapter Two</a></li> 
    <li><a href="#">Chapter Three</a></li> 
    </ul> 
</nav> 

---

Глава Статья:

<article class="clearfix"> 
    <h1>Chapter One</h1> 
</article> 
<article class="clearfix"> 
    <h1>Chapter Two</h1> 
    <p>And so on...</p> 

Answer 1

Как о чем-то вроде этого (demo)?

$(function(){ 

    // find the nav & headers 
    var nav = $('#chapters li a'), 
     articles = $('#main article > h1'); 

    // now assign an id/href to each 
    nav.each(function(i){ 
     nav.eq(i).attr('href', '#article-' + i); 
     articles[i].id = 'article-' + i; 
    }); 

}); 

Answer 2

Там много Jquery учебника для якоря ссылки свитки с JQuery , я лично использую этот один на один из моих проектов

попробовать этот учебник:

http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/

:)

Answer 3

относительно простой подход к удовлетворению ваших требований будет это, хотя это, конечно, может быть оптимизировано:

$('h1').each(
    function(){ 
     var that = $(this), 
      txt = that.text(); 
     that[0].id = txt.replace(/\s+/,''); 

     if (!$('#toc').length){ 
      $('<ul />', { id : 'toc' }).prependTo('body'); 
     } 

     var li = $('<li />').appendTo('#toc'); 
     $('<a />', {'href' : '#' + that.text().replace(/\s+/,''), text : that.text()}).appendTo(li); 
    }); 

JS Fiddle demo.

Ссылки:

• JQuery:
  • appendTo().
  • prependTo().
  • text().
• Plain JavaScript:
  • String.replace().