Найти следующую и предыдущую ссылку в иерархии - PullRequest
Новая
       3

Найти следующую и предыдущую ссылку в иерархии

5 голосов
/ 04 января 2011

У меня есть иерархия со ссылками, вложенными в элемент списка, например: 

<ul>
    <li><a href="#">Page 1</a>
        <ul>
            <li><a href="#">Page 1.1</a></li>
            <li><a href="#">Page 1.2</a>
                <ul>
                    <li><a href="#">Page 1.2.1</a></li>
                    <li><a href="#">Page 1.2.2</a></li>
                </ul>
            </li>
            <li><a href="#">Page 1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Page 2</a>
        <ul>
            <li><a href="#">Page 2.1</a></li>
            <li><a href="#">Page 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Page 3</a>
        <ul>
            <li><a href="#">Page 3.1</a>
                <ul>
                    <li><a href="#">Page 3.1.1</a></li>
                    <li><a href="#">Page 3.1.2</a></li>
                </ul>
            <li><a href="#">Page 3.2</a></li>
            <li><a href="#">Page 3.3</a></li>
                <ul>
                    <li><a href="#">Page 3.1.1</a></li>
                    <li><a href="#">Page 3.1.2</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

По сути, просто карта сайта.Но я хочу создать следующую и предыдущую ссылки с помощью jQuery, который находит активную страницу, на которой вы находитесь (возможно, путем проверки класса), и находя предыдущий и следующий якорный элемент (без учета иерархии).Я пробовал с next(), previous() и find(), но не могу заставить его работать.

Какой самый простой способ получить элементы привязки до и после текущего?

Ответы [ 2 ]

7 голосов
/ 04 января 2011

Если предположить, что <a> для текущей страницы имеет class="current", то вы можете сделать это, чтобы найти плоский индекс текущей страницы в карте сайта: 

// Get current anchor
var currentA = $("a.current");

// Get array of all anchors in sitemap
var anchors = $("ul a"); // (would be better if you gave the ul an id)

// Find the index of the current anchor, within the (flattened) sitemap
var i = anchors.index(currentA);

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

var i = $("ul a").index($("a.current"));

Затем вы можете написать функции для перехода на страницу к следующим и предыдущим ссылкам: 

// Go to the next link
function goToNext() {
    if (i + 1 < anchors.length) {
        window.location.href = anchors[i + 1].href;
    }
}

// Go to the previous link
function goToPrev() {
    if (i > 0) {
        window.location.href = anchors[i - 1].href;
    }
}

Наконец,прикрепите эти функции к своим следующим и прежним якорям: 

$("a.next").click(goToNext);
$("a.prev").click(goToPrev);
7 голосов
/ 04 января 2011 
var selected = $("a.selected");
var anchors = $("a");

var pos = anchors.index(selected);
var next = anchors.get(pos+1);
var prev = anchors.get(pos-1);
...