在父元素中查找可见的类元素

Question

如何使用jQuery在父级中找到可见的子元素？

试图例如以下（和许多其他）不起作用。

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

父级中有许多子元素，但只有一个子元素可以同时显示。所有子元素都使用相同的类名定义。

编辑：  在我的代码中，子元素使用display属性定义为可见或不可见。与以下相似：

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

解 得到了这个：

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

Answer 1

这是你如何做到的：

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

<强> jsFiddle

Answer 2

也许有些事情如下：

• 获取父元素的所有子类元素

  var childElements = $("#parent .child");
  

• 找到您想要的元素：

  var foundIt;
  
  childElements.each(function(){ 
  
   if(this.is(':visible')){
  
      foundIt = this;
  
   }
  
  });
  

参考文献：

• https://api.jquery.com/each/

• Detect if an element is visible

编辑：

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

        foundIt = this;

     }

Answer 3

你可以这样做Fiddle

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