Jquery 从divs中获取H1并制作一个侧栏链接菜单_Jquery_Html

Jquery 从divs中获取H1并制作一个侧栏链接菜单

jquery html

Jquery 从divs中获取H1并制作一个侧栏链接菜单,jquery,html,Jquery,Html,我希望有人能给我指出正确的方向在现有的html站点上，我有一个包含很多div的页面，每个div都是一条“新闻消息” 我在这个页面上使用分页插件来显示一个div $("#newsmessages .news").quickpaginate({ perpage: 1, showcounter: true, pager : $("#nieuwsbericht_list_counter") }); 我想做的是：从每个div中获取h1，将其放在页面侧栏的列表中，并将其作为指向该div的链接以下

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

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

我在这个页面上使用分页插件来显示一个div

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

我想做的是：

从每个div中获取h1，将其放在页面侧栏的列表中，并将其作为指向该div的链接

以下是新闻消息的结构：


测试
喋喋不休
测试1
喋喋不休
测试2
喋喋不休

使用jquery可以做到这一点吗

这件事已经让我绞尽脑汁三天了

thnx

更新：

多亏了韦斯顿，我才有了带锚的侧边栏

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

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

Thnx

Jeroen

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

$(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>');
    });
});

$（函数（）{
变量列表=$（“#边栏ul”）；
$（“.news h1”）.each（函数（）{
$（this.prepend（“”）；
});
});

这是随附的标记

<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>


边栏


测试
喋喋不休
测试1
喋喋不休
测试2
喋喋不休

是否也可以将所有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>


边栏


标题1
副标题1
第1款
副标题2
第2款
标题2
副标题3
第3款
副标题4
第4段

您所说的“将其链接到div”是什么意思？你的意思是做一个“锚页面跳转”吗？是的，就是这样，你会在侧栏上看到一个锚列表Hi Weston谢谢你，它工作了，唯一剩下的问题是我点击了一个锚链接请求的消息没有显示，我想问题在于分页，你也有解决办法吗？？thnxI不知道quickpaginate插件。如果它通过分离/附加DOM元素来工作，那么#-链接就不起作用。不知何故，您需要跟踪每个新闻div位于哪个页面上，并告诉分页工具切换到该页面。

<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>