JQuery Selector visible

From CoderLearner
Jump to: navigation, search

Description

Select all elements that are visible.

Syntax

$('div:visible')

Example 1

The example included the double click and single click. When page load, the visible elements have the green background. When user click on the element, it will turn to yellow background. Finally, double click on the visible element will turn the background back to green.

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Select</title>
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <style>
         div, span {
            width:130px;
            height:50px;
            background-color:green;
            padding:5px;
            margin:5px;
         }
      </style>
      <script>
         $().ready(function() {
            var chk_visible1=$('div#test1').is(':visible');
            if(chk_visible1) {
               $('div#msg').text('Visible');
            }
            // single click
            $('div:visible').click(function(){
               $(this).css('background-color','yellow');
            });
            // double click
            $('div:visible').dblclick(function(){
               $(this).css('background-color','green');
            });
         });
      </script>
   </head>
   <body> 
      <div id="msg"></div>
      <div id="test1">
         Test 1
      </div>
      <div id="test2">
         Test 2
      </div>
      <div id="test3">
         Test 3
      </div>
      <div id="test4">
         Test 4
      </div>
   </body>
</html>

Try It