Finding a visible class element within a parent element

Question

How can I find a visible child element within a parent with jQuery?

Tried e.g. the following (and many others) which does not work.

var childelement = $("#parent").find(".child:visible");

There are many child elements within the parent, but only one is visible in the same time. All child elements are defined with the same class name.

Edit: In my code the child elements are defined to visible or invisible with the display attribute. Similar than below:

<span class="child" style="display: inline;">One</li>
<span class="child" style="display: none;">Two</li>

SOLUTION Got it work with this one:

<div class="child" style="display: inline;">One</li>
<div class="child" style="display: none;">Two</li>

Actually I used the span element in the beginning. There were problems with that one. Changed it to div and now it works. I didn't copypaste the whole code here because it's quite complex. Now it works. See above. Thanks anyway :) — CuriousSuperhero, Apr 15 '14 at 14:18

score 1 · Answer 1 · answered Apr 15 '14 at 13:28

1

Here's how you do it :

$('#parent').find(':visible');

jsFiddle

answered Apr 15 '14 at 13:28

SauriolJf

412
2
10

But I would like to find a .child class that is visible. There can be other visible elements within #parent as well. Your code is good, but it finds all classes within #parent that are visible. – CuriousSuperhero Apr 15 '14 at 13:30
Ok then when I use your example it still works : http://jsfiddle.net/xqc4v/1/ – SauriolJf Apr 15 '14 at 13:34
In my code the child elements are defined to visible or invisible with the display attribute. As seen below:
One
Two

CuriousSuperhero

Apr 15 '14 at 13:50

Ok but it's still working : http://jsfiddle.net/xqc4v/5/ If it works for you please take a two seconds to accept my answer. :) – SauriolJf Apr 15 '14 at 19:05

score 0 · Answer 2 · edited May 23 '17 at 12:23

Perhaps something along the lines of:

Get all the child class elements of the parent element
```
var childElements = $("#parent .child");
```

Find the element you want:

var foundIt;

childElements.each(function(){ 

 if(this.is(':visible')){

    foundIt = this;

 }

});

References:

EDIT:

  if(this.is(':inline')){

        foundIt = this;

     }

score 0 · Answer 3 · answered Apr 15 '14 at 13:38

0

You can do it this way Fiddle

$("#parentElement").children(':visible');

answered Apr 15 '14 at 13:38

neel shah

2,231
15
19

Finding a visible class element within a parent element

3 Answers3