javascript - 确定 div 的一侧

Question

我想检查 div 是在左侧还是右侧，以便当 div 位于右侧时它会更改类。这可以用 JS 实现吗？

这就是我现在所拥有的:

这就是我想要的结果:

所以基本上它只是翻转了一切。这是我的代码:

.box-area {
  background-color: #BA5e8e;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-8 > div {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  font-family: roboto-thin;
  font-size: 14px;
  color: #fff;
  margin-top: 10px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-8 {
  padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div > img {
  width: 75%;
  height: 100%;
  margin: 5px;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-left: 20px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div {
  padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 {
  padding: 0;
}

<div class="area-blocks">
  <div class="box-area col-xs-6">
    <div class="area-box">
      <div class="col-xs-8">
        <div class="area-file-name">
          <span>
            Bike trips on lombok
          </span>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="area-file-type">
          <img src="includes/img/pdf.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="box-area col-xs-6">
    <div class="area-box">
      <div class="col-xs-8">
        <div class="area-file-name">
          <span>
            Bike trips on lombok
          </span>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="area-file-type">
          <img src="includes/img/pdf.png" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

提前致谢。

Answer 1

您不需要 JS 或 jQuery 来实现此目的。在 CSS 中，使用 :nth-child(2n) 选择器(而不是您的类)来更改所需元素的每隔一个实例以向右对齐。试试这个:

.box-area {
  background-color: #BA5e8e;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* this is the boxes to align to the right */
.box-area:nth-child(2n) {
  border-radius: 10px 0 0 10px;
  padding: 0 0 0 10px;
}

body > div.area > div > div.area-blocks > div > div > div.col-xs-8 > div {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  font-family: roboto-thin;
  font-size: 14px;
  color: #fff;
  margin-top: 10px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-8 {
  padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div > img {
  width: 75%;
  height: 100%;
  margin: 5px;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-left: 20px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div {
  padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 {
  padding: 0;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<div class="area-blocks">
  <div class="box-area col-xs-6">
    <div class="area-box">
      <div class="col-xs-8">
        <div class="area-file-name">
          <span>
            Bike trips on lombok
          </span>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="area-file-type">
          <img src="includes/img/pdf.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="box-area col-xs-6">
    <div class="area-box">
      <div class="col-xs-8">
        <div class="area-file-name">
          <span>
            Bike trips on lombok
          </span>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="area-file-type">
          <img src="includes/img/pdf.png" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

另请注意，我在示例中添加了 bootstrap，因为我意识到您的示例缺少样式。