дерево div использовать один JQuery

У меня есть три разных имени в моем классе div. Я могу запустить одно имя класса с помощью jQuery. Но я не могу запустить имя класса дерева с помощью jQuery. кто-нибудь может мне помочь. в этом исследовании может использоваться только такой p_img. p_img, p_img2 и tree_img эти три класса. Как я могу использовать в одном JavaScript. Это моя демонстрация JSFiddle

Этот javascript- код для обрезки изображения для одного 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-код:

<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>

и 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;

}