从div中获取H1并制作侧边栏链接菜单

我希望有人能给我指明正确的方向

在一个现有的html网站上，我有一个包含很多div的页面，每个div都是一个"新闻消息"

我在这个页面上使用分页插件一次只显示1个div。

$("#newsmessages .news").quickpaginate({ perpage: 1, showcounter: true, pager : $("#nieuwsbericht_list_counter")  });

我想做的是：

从每个div中获取h1，将其放在页面侧边栏的列表中，并使其成为div的链接。

这是新闻消息的结构：

  <div class"news">
  <h1>test</h1>
  <p>blablabla</p>
  </div>
  <div class"news">
  <h1>test1</h1>
  <p>blablabla</p>
  </div> 
  <div class"news">
  <h1>test2</h1>
  <p>blablabla</p>
  </div>    
<div/>

jquery可以做到这一点吗？

这个已经让我的大脑瘫痪了3天了

thnx

更新：

感谢韦斯顿，我有我的侧边栏与锚，

但当我点击一个锚时，什么都没发生，我把它归咎于分页插件，没有这个插件，锚就可以工作。

有人能解决这个问题吗？我更喜欢分页插件，而不是向下滚动半小时。

Thnx

Jeroen

这是jQuery。它在新闻分区中创建锚，并将链接放在侧边栏分区的列表中

$(function() {
    var list = $('#sidebar ul');
    $(".news h1").each(function() {
        $(this).prepend('<a name="' + $(this).text() + '"></a>');
        $(list).append('<li><a href="#' + $(this).text() + '">' +  $(this).text() + '</a></li>');
    });
});

这是相应的标记。

<body>
  <div id="sidebar">
    <h2>Sidebar</h2>
    <ul>
    </ul>
  </div>
  <div class="news">
    <h1>test</h1>
    <p>blablabla</p>
  </div>
  <div class="news">
    <h1>test1</h1>
    <p>blablabla</p>
  </div> 
  <div class="news">
    <h1>test2</h1>
    <p>blablabla</p>
  </div> 
</body>

是否也可以将所有h1和h2都放到侧边栏链接菜单中？因此，结果可能如下所示：

标题1
- 副标题1
- 副标题2
标题2
- 副标题3
- 副标题4

⬇️使用这种示例代码⬇️

<body>
  <div id="sidebar">
    <h2>Sidebar</h2>
    <ul>
    </ul>
  </div>
  <div class="content">
    <h1>Title 1</h1>
      <h2>Subtitle 1</h2>
      <p>Paragraph 1</p>
      <h2>Subtitle 2</h2>
      <p>Paragraph 2</p>
    <h1>Title 2</h1>
      <h2>Subtitle 3</h2>
      <p>Paragraph 3</p>
      <h2>Subtitle 4</h2>
      <p>Paragraph 4</p>
</body>

相关内容

最新更新

热门标签：