通過Jquery查找下一個相同類型的元素

Question

大家好，請檢查下面的html。

<div class="mainDiv2"> 
     <a href="home00.html" >home00</a> 
     <a href="home0.html" >home0</a><br /><br /> 
     <h1>Employee List</h1> 
     <a href="home.html" >home</a><br /><br /> 
     <a href="home2.html" >home2</a> 
     <a href="home3.html" >home3</a> 
     <h1>Employee List2</h1> 
     <a href="home4.html">home4</a> 
     <a href="home5.html">home5</a> 
     <h1>Employee List3</h1> 
     <a href="home6.html">home6</a> 
     <a href="home7.html">home7</a> 
     <a href="home8.html">home8</a> 
     <a href="home9.html" class="active">home9</a> 

     <p> 
      {!PageTitle} 
     </p> 
    </div> 
    <div> 
     <a class="btn btn-default" id="prevRec" href="#">Pre</a> 
     <a class="btn btn-default" id="nextRec" href="#">Next</a> 
    </div> 

我想要的是。如果在href上實現了一個類.active，那麼我想要獲得相同類型的前一個和下一個元素href值。在當前的HTML將返回

前：home8.html 下一頁：空

在以下情況下

<div class="mainDiv2"> 
     <a href="home00.html" >home00</a> 
     <a href="home0.html" >home0</a><br /><br /> 
     <h1>Employee List</h1> 
     <a href="home.html" >home</a><br /><br /> 
     <a href="home2.html" >home2</a> 
     <a href="home3.html" >home3</a> 
     <h1>Employee List2</h1> 
     <a href="home4.html">home4</a> 
     <a href="home5.html">home5</a> 
     <h1>Employee List3</h1> 
     <a href="home6.html" class="active">home6</a> 
     <a href="home7.html">home7</a> 
     <a href="home8.html">home8</a> 
     <a href="home9.html" >home9</a> 

     <p> 
      {!PageTitle} 
     </p> 
    </div> 

它將返回

前：home5.html 下一頁：home7 .html

注意：請記住，a標籤之間有h1標籤..只是爲了讓你知道我有傢伙已經是這個問題的答案..但我想要不同的解決方案。我不認爲這是正確的解決方案。

如果這是我的回答：

$(document).ready(function() { 
     var currActive = $('div[class="mainDiv2"]').find('a.active'); 

     if ($(currActive).nextAll('a').length > 0) { 
      var nextHref = $(currActive).nextAll('a').attr("href") 
      $("#nextRec").attr("href", nextHref); 
     } 
     else 
      $("#nextRec").attr("href", 'http://www.google.com').text("Home"); 

     //-------------- 

     if ($(currActive).prevAll('a').length > 0) { 
      var preHref = $(currActive).prevAll('a').attr("href") 
      $("#prevRec").attr("href", preHref); 
     } 
     else 
      $("#prevRec").attr("href", 'http://www.google.com').text("Home"); 
    }); 

謝謝..

Answer 1

要做到這一點，你可以使用prevAll()和nextAll()獲得所需要的元素，即使它們之間的h1。試試這個：

var $active = $('a.active'); 
 
var prev = $active.prevAll('a').first().attr('href'); 
 
var next = $active.nextAll('a').first().attr('href'); 
 

 
console.log(prev); 
 
console.log(next);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainDiv2"> 
 
    <a href="home00.html">home00</a> 
 
    <a href="home0.html">home0</a><br /><br /> 
 
    <h1>Employee List</h1> 
 
    <a href="home.html">home</a><br /><br /> 
 
    <a href="home2.html">home2</a> 
 
    <a href="home3.html">home3</a> 
 
    <h1>Employee List2</h1> 
 
    <a href="home4.html">home4</a> 
 
    <a href="home5.html">home5</a> 
 
    <h1>Employee List3</h1> 
 
    <a href="home6.html" class="active">home6</a> 
 
    <a href="home7.html">home7</a> 
 
    <a href="home8.html">home8</a> 
 
    <a href="home9.html">home9</a> 
 
    <p> 
 
    {!PageTitle} 
 
    </p> 
 
</div>

Answer 2

你可以嘗試這樣的事情與上一頁/下一頁通過消除不鏈接任何元素，如果存在，這將趕上多個活動類：

$('.mainDiv2').clone().find('*').remove('*:not("a")').end().find('.active').each(function(){ 
 
    var next = $(this).next('a').attr('href'); 
 
    var prev = $(this).prev('a').attr('href'); 
 
    console.log(prev== undefined?'google.com':prev,next == undefined?'google.com':next); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainDiv2"> 
 
    <a href="home00.html">home00</a> 
 
    <a href="home0.html">home0</a><br /><br /> 
 
    <h1>Employee List</h1> 
 
    <a href="home.html">home</a><br /><br /> 
 
    <a href="home2.html">home2</a> 
 
    <a href="home3.html">home3</a> 
 
    <h1>Employee List2</h1> 
 
    <a href="home4.html">home4</a> 
 
    <a href="home5.html">home5</a> 
 
    <h1>Employee List3</h1> 
 
    <a href="home6.html" class="active">home6</a> 
 
    <a href="home7.html">home7</a> 
 
    <a href="home8.html">home8</a> 
 
    <a href="home9.html">home9</a> 
 
    <a href="home10.html" class="active">home6</a> 
 

 
    <p> 
 
    {!PageTitle} 
 
    </p> 
 
</div>