どのdivが表示されているかを確認するためのjQuery

Question

私はウィザードを開発する必要があるので、ウィザードページの1つとして毎回「行」クラスを表示します。ここでは、現在表示されているdivがどれかを確認したい場合は、他のdivを非表示にして2番目のdivなどを表示することができます。

現在表示されているdivのインデックスを取得します。

私はこのようないくつかのコードがあります：あなたは

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

を試してみて、if文でそれを入れていないのはなぜ

(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

を？あなたは要素が可視であるかどうかをテストするためにこれを行うことができ、あなたが他のdivを非表示にしたいので、私はあなたがすでに実行する方法を知っていると確信している

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

を行うことができます。

詳細は.is()jQuery APIをご覧ください。