Question

我在html页面的正文中添加了几个div。接下来，我在jQuery中添加了某些按钮和相关的单击函数。根据按下的按钮，div元素的背景颜色会发生变化。问题发生在终端。在它到达第一个（或最后一个）后，我想循环通过下一个元素。以下是我试过的内容。在if()部分代码中似乎存在问题。请指出这里可能出错的地方。 jsFiddle link

我无法理解我是否可以指定为：

$curr = $("div").first();

那么为什么我不能比较：

if($curr === $("div").first())

HTML：

<div></div>
<div></div>
<div><span>has child</span></div>
<div></div>
<div></div>
<div></div>
<div id="start"></div>
<div></div>

<p>Go to First <input type="button" id="first" value="First" /></p>
<p>Go to Next <input type="button" id="next" value="Next"/></p>
<p>Go to Prev <input type="button" id="prev" value="Prev" /></p>
<p>Go to Last <input type="button" id="last" value="Last" /></p>

CSS：

div {
    width: 40px;
    height: 40px;
    margin: 10px;
    float: left;
    border: 2px blue solid;
    padding: 2px;
  }
  span {
    font-size: 14px;
  }
  p {
    clear: left;
    margin: 10px;
  }

JS：

var $curr = $( "#start" );
$curr.css( "background", "#f99" );

$( "#first" ).click(function() {
      $curr = $("div").first();
      $( "div" ).css( "background", "" );
      $curr.css( "background", "#f99" );  
});

$( "#prev" ).click(function() {
    if($curr === $("div").first()){
        alert("cycling through...");
        $curr = $("div").last();
        $( "div" ).css( "background", "" );
        $curr.css( "background", "#f99" ); 
    }else{
        $curr = $curr.prev();
        $( "div" ).css( "background", "" );
        $curr.css( "background", "#f99" );  
    }
});

$( "#next" ).click(function() {
    if($curr === $("div").last()) {
        alert("cycling through...");
        $curr = $("div").first();
        $( "div" ).css( "background", "" );
        $curr.css( "background", "#f99" ); 
    }else {
        $curr = $curr.next();
        $( "div" ).css( "background", "" );
        $curr.css( "background", "#f99" );
    }
});

$( "#last" ).click(function() {
      $curr = $("div").last();
      $( "div" ).css( "background", "" );
      $curr.css( "background", "#f99" );  
});

更新01：在它到达最后一个元素后，按下“下一步”按钮也会按下按钮。我想要的是第一个div是彩色而不是按钮。为什么按钮会变色？它们不在任何div内。

Answer 1

试试这个：你可以使用CSS类添加/删除背景类，因为这很容易识别当前元素。由于is(':last')或is(':first')无效，因为所有div都没有包装元素且它们直接在body内。因此，您可以使用元素的索引来查找它是最后一个还是第一个。

CSS

.color{background-color: #f99;}

的jQuery

var $curr = $( "#start" );
$curr.addClass( "color" );
var total =  $curr.siblings("div").length;

$( "#first" ).click(function() {
      $curr = $("div").first();
      $( "div.color" ).removeClass("color" );
      $curr.addClass( "color" );  
});

$( "#prev" ).click(function() {

    if($curr.index()==0) {
        $curr = $('div').last();
    }
    else
    {
      $curr = $curr.prev();  
    }
    $( "div.color" ).removeClass("color" );
    $curr.addClass( "color" ); 
});

$( "#next" ).click(function() {
    if($curr.index()==total) {
        $curr = $('div').first();
    }
    else
    {
      $curr = $curr.next();  
    }
    $( "div.color" ).removeClass("color" );
    $curr.addClass( "color" ); 
});

$( "#last" ).click(function() {
      $curr = $("div").last();
      $( "div.color" ).removeClass("color" );
      $curr.addClass( "color" );  
});

<强> DEMO

Answer 2

经过深入研究后，我发现正确的语法是使用is()函数，而不是===运算符。

CORRECT SYNTAX：

$curr.is( $("div:first") )

错误的尝试：

$curr === $("div").first()

这里是forked jsfiddle

使用jQuery遍历div

2 个答案: