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中，它将返回

Pre：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也是如此。试试这个：

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

你可以通过删除任何不是链接的元素来尝试使用prev / next这样的东西，如果存在，这将捕获多个活动类：

$('.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>

通过Jquery查找相同类型的下一个元素

2 个答案: