javascript - 树 div 使用一个 jquery

Question

我的 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 代码:

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

}

Answer 1

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

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