我有一个清单:
var $curr = $('#lol').children().first()
var $last = $('#lol').children().last()
$curr.css("z-index", "1");
$("#next").click(function() {
if ($curr == $last) {
$curr = $curr.first();
$("li").css("z-index", "");
$curr.css("z-index", "1");
} else {
$curr = $curr.next();
$("li").css("z-index", "");
$curr.css("z-index", "1");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
<button id="prev" type="button">prev</button>
<button id="next" type="button">next</button>
<ul id="lol">
<li id="a">1</li>
<li id="b">2</li>
<li id="c">3</li>
<li id="d">4</li>
</ul>
</div>
点击下一个按钮后我想改变下一个li项的样式,但如果它是ul列表的最后一个li元素,它应该改变第一个li元素。
如果$ curr是列表的最后一个元素并转到第一个元素,我不知道如何chceck。请帮助:)
答案 0 :(得分:1)
两个jQuery对象永远不会相同,但您可以使用is()
if ( $curr.is( $last ) ) {
或比较本机DOM节点
if ( $curr.get(0) == $last.get(0) ) {
通常更容易使用类来应用样式更改
var elems = $('#lol li');
$( "#next" ).click(function() {
var next = elems.filter('.active').next();
if ( next.length === 0 ) next = elems.first();
elems.not( next.addClass('active') ).removeClass('active');
});
$( "#prev" ).click(function() {
var prev = elems.filter('.active').prev();
if ( prev.length === 0 ) prev = elems.last();
elems.not( prev.addClass('active') ).removeClass('active');
});
&#13;
#lol li {
z-index : 0;
color : black;
}
#lol li.active {
z-index : 1;
color : red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slider">
<button id="prev" type="button">prev</button>
<button id="next" type="button">next</button>
<ul id="lol">
<li id="a" class="active">1</li>
<li id="b">2</li>
<li id="c">3</li>
<li id="d">4</li>
</ul>
&#13;
答案 1 :(得分:0)
next()
基本上,如果调用$curr
将空的jquery对象分配给$sourceArray = array( /* THIS IS THE ARRAY WITH YOUR DATA */ );
$displaynames = array(); /* THIS IS THE NEW ARRAY, FOR THE DISPLAYNAMES */
foreach ($sourceArray as $arrayItem) {
$displaynames[] = $arrayItem['displayname'];
}
,它会再次将其设置为第一个子节点。