[英]Find next element of same type through Jquery
大家好,请检查以下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");
});
谢谢..
为此,您可以使用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>
您可以通过消除不属于链接的任何元素来尝试使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.