jquery的 children（’idv’），parent(div)用法

1

divid="parentNode"class="treeNode">

       Parentnode's text.

   

   <divid="mainNode"class="treeNode">

                Thetarget node

   

       <divid="childNode"class="treeNode">

                         Themain node's child node

                </div>

       

   </div>

</div>

 

<inputtype="button"value="CopyParent Text"id="CopyParent">

<inputtype="button"value="Copy ChildText"id="CopyChild">

                                         

                               

                           

CSS Code

 

                                           

div#parentNode {

       width:600px;

       height:250px;  

       z-index:10;

}

 

div#mainNode {

       width:400px;

       height:180px;  

       z-index:20;

}

 

div#childNode {

       width:300px;

       height:100px;

       z-index:30;

}

 

div.treeNode {

   border: 1px solid black;

   color: black;

   background-color:lime;

       margin:20px;

}                          

                               

                           

jQuery Code

 

                                           

//Use DOM traversal methods to copy theparent node's text to the main node

$('input#CopyParent').click(function(){

       varcurrentNodeHTML= $('div#mainNode').html()

       varparentText= $('div#mainNode').parent('div').text();

   $('div#mainNode').html(parentText+currentNodeHTML);

})

 

//Use DOM traversal methods to copy thechild node's text to the main node

$('input#CopyChild').click(function(){

       varcurrentNodeHTML= $('div#mainNode').html()

       varchildText = $('div#mainNode').children('div').text();

   $('div#mainNode').html(childText+currentNodeHTML);

})

2