Как получить предыдущую и следующую ссылку hrefs из списка hrefs?

Question

У меня есть следующий код, который проверяет наличие событий щелчка по ссылкам внутри из элемента с ID = меню:

$("#menu") 
    .on('click', 'a[href^="/City"]', function (event) { 
     event.preventDefault(); 
     $('#editLink').attr("data-href", link); 
    }); 

HTML, что этот код работает на выглядит следующим образом:

<ul class="controls-buttons question-grid" id="menu"> 
    <li class="question-grid"><a href="/City/0101004H">1</a></li> 
    <li class="question-grid"><a href="/City/0101004I">2</a></li> 
    <li class="question-grid"><a href="/City/0101004J">3</a></li> 
    <li class="question-grid"><a href="/City/0101004K">4</a></li> 
</ul> 

I есть две ссылки на другую часть моего экрана, как показано ниже:

<a id="prev" href="#">Prev</a> 
<a id="next" href="#">Next</a> 

Как я могу сделать так, что если пользователь нажимает на «2 "Ссылка, то эти ссылки будут изменены на:

<a id="prev" href="/City/0101004H" title="City 1">Prev</a> 
<a id="next" href="/City/0101004J" title="City 3">Next</a> 

Если пользователь нажимает на„1“, что ссылки изменяются на:

<a id="prev" href="#"></a> 
<a id="next" href="/City/0101004J" title="City 2">Next</a> 

Если пользователь нажимает на последний элемент в списке то ссылки будут изменены на:

<a id="prev" href="/City/0101004H" title="City 3">Prev</a> 
<a id="next" href="#"></a> 

для меня самые большие проблемы в том, как проверить, есть ли ссылки до или после текущей ссылки. Я знаю базовый jQuery, но надеюсь, что кто-то может помочь мне с некоторыми предложениями.

Answer 1

Я предполагаю, что-то вроде этого:

$("#menu").on('click', 'a[href^="/City"]', function(e) { 
    e.preventDefault(); 
    $('#editLink').attr("data-href", $(this).attr('href')); 
}); 

$('#prev, #next').on('click', function() { 
    var isNext = this.id==='next', 
     liNow = $('#editLink').attr("data-href") || $('#menu li:first a').attr('href'), 
     nextA = $('a[href="'+liNow+'"]', '#menu').parent('li')[isNext?'next':'prev']('li').find('a'); 
    if (!nextA.length) nextA = isNext ? $('#menu li:last a') : $('#menu li:first a'); 
    nextA.trigger('click'); 
}); 

FIDDLE

Answer 2

я не проверить это, но надеюсь, что полезно:

$('.question-grid a').click(function(){ 

    var number=parseInt($(this).html()); 

    if(number<2) 
    { 
     $('#prev').attr('href','#'); 
     $('#next').attr('href',$(this).next('a').attr('href'); 
    }else if(number>1 && number<4){ 
     $('#prev').attr('href',$(this).prev('a').attr('href')); 
     $('#next').attr('href',$(this).next('a').attr('href')); 
    }else{ 
     $('#prev').attr('href',$(this).prev('a').attr('href')); 
     $('#next').attr('href','#'); 
    } 
});