JavaScript DHTML/jQuery/parents

Материал из Web эксперт
Перейти к: навигация, поиск

Click to find all unique div parent elements of each span.

   <source lang="html4strict">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
   function showParents() {
           
             var len = $("span")
                              .parents("div")
                              .css("border", "2px red solid")
                              .length;
             $("b").text("Unique div parents: " + len);
           }
           $("span").click(function () {
            
             showParents();
           });
       });
   </script>
   <style>
     .selected { color:blue; }
     
   </style>
   
 </head>
 <body>
   <body>
span
         span
         span
       
   </body>

</html>

 </source>
   
  


Get DIV parent count

   <source lang="html4strict">
   

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
            $("span").click(function () {
                var len = $("span").parents("div").length;
                alert(len);
            });
       });
   </script>
 </head>
 <body>
   <body>
Hello
 </body>

</html>



 </source>
   
  


Get form input parent

   <source lang="html4strict">
   

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
      var input = $(":submit").parent().css({background:"yellow", border:"3px red solid"});
   
      $("#result").text("jQuery matched " + input.length + " elements.");
       
   });
   </script>
 </head>
 <body>
    <form><input type="submit" /></form>
 </body>

</html>



 </source>
   
  


Get parents

   <source lang="html4strict">
   

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
            var parentEls = $("span").parents()
                         .map(function () { 
                               return this.tagName; 
                             })
                         .get().join(", ");
            $("span").append(parentEls);
       });
   </script>
 </head>
 <body>
   <body>

 </body>

</html>



 </source>
   
  


Get parent with certain class

   <source lang="html4strict">
   

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
             $("p").parent(".selected").css("background", "yellow");
       });
   </script>
   <style>
     .y { background:yellow; }
 </style>
 </head>
 <body>
   <body>
asdf</p>
           asdf
 </body>

</html>



 </source>
   
  


parent(expr): filter the set of parent elements

   <source lang="html4strict">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
                $("*", document.body).each(function () {
                     var parentTag = $(this).parent().get(0).tagName;
                     $(this).prepend(document.createTextNode(parentTag + " > "));
                });
       });
   </script>
 </head>
 <body>
   <body>
             

p

div

p

p

div

p

div
   </body>

</html>

 </source>
   
  


parents(expr) gets elements containing the unique ancestors

   <source lang="html4strict">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               var parentEls = $("p").parents()
                                     .map(function () { 
                                           return this.tagName; 
                                         })
                                     .get().join(", ");
               $("p").append("" + parentEls + "");
       });
   </script>
 </head>
 <body>
   <body>

Hello

Hello Again

   </body>

</html>

 </source>
   
  


Returns true, because the parent of the input is a form element

   <source lang="html4strict">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
                  alert( $(":checkbox").parent().is("form"));
                   
       });
   </script>
 </head>
 <body>
   <body>
         <form><input type="checkbox" /></form>
   </body>

</html>

 </source>
   
  


Shows the parent of each element as (parent > child). Check the View Source to see the raw html.

   <source lang="html4strict">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
                $("*", document.body).each(function () {
                     var parentTag = $(this).parent().get(0).tagName;
                     $(this).prepend(document.createTextNode(parentTag + " > "));
                });
       });
   </script>
 </head>
 <body>
   <body>
             

p

div

p

p

div

p

div
   </body>

</html>

 </source>