2012-03-24 4 views
2

я надеюсь, что кто-то может мне точку в правильном направленииполучить H1 от дивы и сделать меню боковой панели Link

На существующем HTML сайта, у меня есть страница с большим количеством дивов, каждый ДИВ является «Новости сообщения "

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

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

.

то, что я хочу сделать, это:

Получить от каждого Див h1 положить его в списке на боковой панели страницы и сделать его ссылку на дела.

Это структура новостных сообщений:

<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

UPDATE:

Благодаря Weston я быть_наст моя врезка с якорями,

Но когда я нажимаю на якоре ничего не происходит, я обвиняю его в плагине для разбивки на страницы, без этого плагина работают анкеры.

есть кто-нибудь, у кого есть решение для этого, я предпочитаю плагин для разбивки на страницы с прокруткой вниз на полчаса.

Thnx

Йерун

+0

что вы имеете в виду * «сделать ссылку на DIV» *? вы имеете в виду сделать «прыжок с якорной страницы»? – Joseph

+0

Да, это так, поэтому вы получите список якорей на боковой панели – Jeroen

ответ

5

Вот 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>'); 
    }); 
}); 

Вот разметки пойти с ним ..

<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

Фантастический, он работает, спасибо вам, ребята – Jeroen

+0

Привет, Уэстон благодарит вас за это, он работает, только проблема оставлена, я нажимаю одну из якорных ссылок запрашиваемое сообщение не показывать, я думаю, проблема в разбиении на страницы, у вас также есть решение для этого? thnx – Jeroen

+1

Я не знаю, что плагин quickpaginate. Если он работает путем отсоединения/присоединения элементов DOM, то # -литки не будут работать. Как-то вам нужно будет отслеживать, на какой странице находится каждый новостной div, и сообщить пейджинговой вещи перейти на эту страницу. – Weston

Смежные вопросы