jQuery获取所有可见的项目?

时间:2017-02-26 19:09:38

标签: javascript jquery html css

我有这个例子:

HTML

<div id="Contents">
  <div id="Showing"></div>
  <div id="Hiding"></div>
</div>

CSS

#Hiding{
  display : none
}

在jQuery中是否有一种方法可以让DOM中的所有项都可见(显示!=无)?在这种情况下,我们得到2个id为'Contents'和'Showing'的div。非常感谢你。

2 个答案:

答案 0 :(得分:3)

您可以使用jQuery&#39; :visible选择器

&#13;
&#13;
$('*:visible').addClass('visible');
&#13;
#Hiding {
  display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Contents">
  <div id="Showing">showing</div>
  <div id="Hiding">hiding</div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

试试这个,在这里你只能看到显示!=来自内容容器的无物品。

HTML

<div id="Contents">
  <div id="Showing"></div>
  <div id="Hiding"></div>
</div>

使用Javascript:

<script>
$("#Contents").each(function(){
  if($(this).hasClass("visible")){
    $(this).show();
  } else {
    $(this).hide();
  };
</script>

如果您可以尝试使用具有隐藏属性的相同代码获取所有隐藏的内容项。

<script>
    $("#Contents").each(function(){
      if($(this).hasClass("hidden")){
        $(this).show();
      } else {
        $(this).hide();
      };
    </script>