javascript - tree div use one jquery -


i have 3 different names in div class. can run 1 class name jquery. can not run tree class name jquery. can me. in study can use such p_img. p_img, p_img2 , tree_img these 3 classes. how can use in single javascript. jsfiddle demo

this javascript code image crop 1 div ( p_img )

$('.p_img img').each(function() {     var image = $(this),         height = image.height(),         width = image.width();      if (width > height) {         image.addclass('height');         var middle = 0 - (image.width() - image.closest('.p_img').width()) / 2;         image.css('margin-left', middle + 'px');     } else {         var middle = 0 - (image.height() - image.closest('.p_img').height()) / 2;         image.css('margin-top', middle + 'px');     } }); 

html code:

<div class="profile_cover_container">   <div class="cover_container">     <div class="cover_img">          <div class="p_img">             <a href="#">                <img src="http://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/1780641_780166082011699_1924260798_n.jpg" width="198" height="198" padding="0" />            </a>         </div>           <div class="p_img">                <a href="#">                   <img src="http://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="198" height="auto" padding="0" />               </a>         </div>       </div>       <div class="cover_img_big">           <div class="p_img2">               <a href="#">                   <img src="http://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="400" height="400" padding="0" />               </a>           </div>       </div>           <div class="cover_tree_img">           <div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div>           <div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div>           <div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div>        </div>       </div>   </div> 

and css code:

.profile_cover_container{   position:relative;   width:981px;   height:400px;   margin-left:auto;   margin-right:auto;   overflow:hidden;   border:1px solid #d8dbdf;    -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;   margin-top:3px; } .cover_container {   width:981px;   height:400px;   float:left;  } .cover_img {   float:left;   width:200px;   height:400px;    background-color:#000; } .p_img {   float:left;   width:198px;   height:198px;   margin:1px;   overflow: hidden; }  .p_img img {    width: 100%; } .p_img img.height {    width: auto;    height:100%; } .cover_img_big {     float:left;     width:400px;     height:400px;     background-color:black;   } .p_imb2 {   float:left;   width:400px;   height:400px;   margin:1px;   overflow: hidden; }  .p_imb2 img {    width: 100%; } .p_imb2 img.height {    width: auto;    height:100%; } .cover_tree_img {     float:left;     width:381px;     height:400px;     background-color:black; } .tree_img {     float:left;     width:381px;     height:133px;     overflow:hidden;  } 

you can add multiple classes selector in css:

$('.p_img img, .p_img, .p_img2').each(function(){ ... }); 

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -