Retrieving value of displayed div using jquery

Question

I've 2 elements. Each one have same class name. For example,

<div class="test">Value1</div>
<div class="test" style="display:none;">Value2</div>

In the above example I want to get the displayed div's value. ie, Value1.

How can I do this using jquery? Kindly help me

Answer 1

You can check visibility using jquery :visible

var val = $(".test:visible").text();
console.log(val);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Value1</div>
<div class="test" style="display:none;">Value2</div>

Answer 2

Use :visible selector.

$(document).ready(function(){
  alert($(".test:visible").text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Value1</div>
<div class="test" style="display:none;">Value2</div>