更改当前 li 元素的选择

Question

我有一个列表：

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 是否是列表的最后一个元素并转到第一个。请帮助:)

Answer 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');
});

#lol li {
    z-index : 0;
    color : black;
}

#lol li.active {
    z-index : 1;
    color : red;
}

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

Answer 2

var $curr = $('#lol').children().first();
var $list = $('#lol').children();

$curr.css( "z-index", "1" );

$( "#next" ).click(function() {
    $( "li" ).css( "z-index", "" );

    if (($curr = $curr.next()).length === 0) {
        $curr = $list.first();
    }

    $curr.css( "z-index", "1" );
});

基本上，如果调用 next() 将一个空的 jquery 对象分配给 $curr，它会再次将其设置为第一个子对象。

更改当前 li 元素的选择

Change selection of current li element

jquery

if-statement

html-lists