更改当前li元素的选择

时间:2015-05-17 17:30:44

标签: jquery if-statement html-lists

我有一个清单:

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。请帮助:)

2 个答案:

答案 0 :(得分:1)

两个jQuery对象永远不会相同,但您可以使用is()

if ( $curr.is( $last ) ) {

或比较本机DOM节点

if ( $curr.get(0) == $last.get(0) ) {

通常更容易使用类来应用样式更改

&#13;
&#13;
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;
&#13;
&#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']; } ,它会再次将其设置为第一个子节点。