jQuery检查哪个DIV可见

Question

我需要开发一个向导，所以我每次作为向导页面之一显示"行"类。在这里，我想确定当前可见的是哪个是我的div，如果可见，我可以将所有其他Divs隐藏并显示第二个Div，等等。

我想获得当前可见的DIV索引。

我有一些这样的代码：

(each time when next button or prev btn is pressed)
var divs = $('.wiz>div');
divs.hide().first().show(); //initial page
//get current index if one the go to next
//index = ??
divs.hide();
divs.eq(index++).show();

<div class="wiz">
    <div class="row">
        <div class="col s6">
        </div>
        <div class="col s6">
        </div>
    </div>
    <div class="row">
        <div class="col s12">
        </div>
    </div>
    <div class="row">
        <div class="col s6">
        </div>
        <div class="col s6">
        </div>
    </div>
    <div class="row">
        <div class="col s12">
        </div>
    </div>
</div>

Answer 1

这是我的html文件

    <div class="wiz">
    <div class="row">
        <div class="col s6">
            block 1
        </div>
        <div class="col s6">
            block 2
        </div>
    </div>
    <div class="row">
        <div class="col s12">
            block 3
        </div>
    </div>
    <div class="row">
        <div class="col s6">
            block 4
        </div>
        <div class="col s6">
            block 5
        </div>
    </div>
    <div class="row">
        <div class="col s12">
          block 6
        </div>
    </div>
</div>
<button id="btn_prev">Prev</button>
<button id="btn_next">Next</button>

这是我的JavaScript代码

    $(function() {
  //console.log("I'm ready!")
  var divs = $('.wiz>div');
  var index = 0;
  var length = divs.length;
  // initialize
  showHideBlock(divs, index);
  $('#btn_prev').click(function() {
    index = performClick(index, false, length);
    showHideBlock(divs, index);
  });
  $('#btn_next').click(function() {
    index = performClick(index, true, length)
    showHideBlock(divs, index);
  });
});
performClick = function(index, next, length) {
  if (next && index < (length - 1)) return index + 1;
  if (!next && index > 0) return index - 1;
  return index;
}
showHideBlock = function(elt, index) {
  elt.hide();
  elt.eq(index).show();
} 

Answer 2

为什么不尝试

$(element).is(":visible");

并将其放入if语句中？您可以这样做以测试一个元素是否可见，并且由于要隐藏其他divs，因此可以做

$(element).css({display: 'none'});

我确定您已经知道该怎么做。

查看此.is() jQuery API以获取更多信息。