如何仅获取父元素的可见子元素？

Question

I have tried:

var $childNodes = $(".definition").children();
console.log($childNodes.filter(':visible').text());

from Get only visible text within an html element and child elements and I'm getting back all the elements from the parent element with a visibility set to hidden instead of visible .

The full code is on repl preview panel

Answer 1

:visible works for display not for visibility , because visibility consumes space in layout, also opacity too.

 $(".definition").children().filter(function(){ return $(this).css("visibility")=="visible"});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="definition"> <div style= "visibility:hidden" class="definitionAgelenidae">Family:Agelenidae:Definition</div> <div style= "visibility:visible" class="definitionYorimaGenus">Genus:Yorima:Definition</div> <div style= "visibility:hidden" class="definitionYorima_angelica">Yorima angelica Roth:Definition</div> <div style= "visibility:hidden" class="definitionCybaeusGenus">Genus: Cybaeus:Definition</div> </div>

Answer 2

$(".definition").children().filter(function(index, ele){return $(ele).is(":visible")})