获得当前可见DIV的“id”

Question

I have around 6 div on a page and only one of them needs to be visible at a time. During page load, I hide all the other divs except the first one.

Here's my HTML structure.

<div id="A1">
</div>

<div id="A2">
</div>

<div id="B1">
</div>

<div id="B2">
</div>

<div id="C1">
</div>

<div id="C1">
</div>

Here's what I do to hide them :-

$(document).ready(function(){
    $("#A2").hide();
    $("#B1").hide();
    $("#B2").hide();
    $("#C1").hide();
    $("#C2").hide();
});

How would I get the ID of the visible div? I have tried :-

var current_div = $("div:visible");
current_div_id = current_div.attr('id');

Output :- Undefined

var current_div = $("div:visible");
current_div_id = current_div[0].id;

Output :- Blank

What am I getting wrong ?

Answer 1

Try this:

var current_div = $("div:visible").attr("id");
      $( 'body'  ).text( current_div );

http://jsfiddle.net/neowar2x/4/