CODEWITHSUNDEEP
jquery
chrisdemeke
chrisdemeke

Reputation: 333

jQuery - Show only visible span

I'm using the jquery visible selector but it seems to still show both spans. What am I doing wrong?

HTML

 <span id="description">
   Test   
   <span style="display:none; visibility:hidden;">Hide</span>
 </span>

jQuery

 alert($("#description").filter(':visible').text());

JSFIDDLE: http://jsfiddle.net/fak2qtwL/1/

Upvotes: 0

Views: 199

Answers (2)

T J
T J

Reputation: 43156

The jQuery text() method returns all the text content inside matching selector - That includes the text inside their children too. Your selector matches the span#description since it is visible, hence it returns the text inside it's children as well, regardless of their visibility.

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

I think you misunderstand the way it works. Your span contains a child element that is not visible but your parent span is visible. So the result you get is normal. To work in the way you want you need two different span like this:

alert($("span:visible").text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="description">Test</span>
<span style="display:none;">Hide</span>

Upvotes: 3

Related Questions