Home/ Questions/Q 7685769
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T19:19:38+00:00

i hope someone can point me in the right direction On a existing html

  • 0

i hope someone can point me in the right direction

On a existing html site , i have a page with a lot of divs , each div is a “news message”

i use pagination plugin on this page to show just 1 div at the time . 

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

.

what i want to do is :

Get from every div the h1 put it in a list on the sidebar of the page and make it a link to the div .

This is the structure of the news messages: 

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

Is this possible with jquery ?

this one is pulling my brains out for 3 days now

thnx

UPDATE:

Thanks to Weston i have my sidebar with anchors ,

But when i click on a anchor nothing happens , i blame it on the pagination plugin , without this plugin the anchors work .

is there somebody with a solution for this i prefer a pagination plugininstead of scrolling down half an hour .

Thnx

Jeroen

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s the jQuery. It creates anchors in the news divs and puts links in a list in a sidebar 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>');
    });
});

    Here’s the markup to go with it..

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