Javascript tree div使用一个jquery

在我的div类中有三个不同的名字。我可以用jQuery运行一个类名。但是我不能用jQuery运行树类名。有人能帮我吗。 在本研究中只能使用这样的p\img。p_img、p_img2和tree_img这三个类。如何在单个JavaScript中使用。 这是我的演示

这是一个div的图像裁剪代码（p\u 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代码：

$('.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');
    }
});

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

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

}

---

您可以像在css中那样向选择器添加多个类：

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

---

您想在一个jQuery选择器中选择多个类吗？ 你可以用逗号来分隔它们

var divs = $(".p_img, .p_img2, .tree_img");

您还可以使用在代码中添加一点灵活性

---

$（'[class*=“\img”]'）。每个（函数（）{…}）

$（'.p_img，.p_imb2，.p_img3'）。查找（'img'）

@YuryTarabanko您能在我的JSFIDD中通过示例演示一下吗。检查控制台的输出。