Question

我在几个论坛上就这个主题做了一些研究，但还没有找到解决方案。

我希望元素的顶部位置相对于另一个元素的高度。包含这些元素的div重复使用相同的类，并且只为第一个div设置位置，并为其他元素重复相同的顶部。

如何使.bottom-content顶部位置，位于.top高度的末尾，并且在每个.container上都不同？我尝试过.closest，.find，.next。

这是代码示例：

$(document).ready(function() {

    var pTop = $(".container .top-content .top").height();
        
    $(".container .column .bottom-container").css({
      "top" : pTop + "px",
    });
});

.container {
	position: relative;
	display: inline-block;
	vertical-align: top;
 }
 
.top-content {
  position: absolute;
  width: 100%;
  z-index: 100;
 }
 
.top {
  position: absolute;
  background-color: red;
 }
 
.column {
  display: inline-block;
  height: 200px;
  width: 60px;
  background-color: gray;
}

.bottom-content {
  position: relative;
}

.bottom-content {
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  
  <div class="top-content">
    <div class="top">
      Height change with dynamically content.
    </div>
    <div>other thing</div>
  </div>
  
  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 1
      </div>
      <div>other thing</div>
    </div>
  </section>
  
  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 2
      </div>
      <div>other thing</div>
    </div>
  </section>
  
  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 3
      </div>
      <div>other thing</div>
    </div>
  </section>
  
</div>

<div class="container">
  
  <div class="top-content">
    <div class="top">
      Height change with dynamically content, is always different size.
    </div>
    <div>other thing</div>
  </div>
  
  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 1
      </div>
      <div>other thing</div>
    </div>
  </section>
  
  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 2
      </div>
      <div>other thing</div>
    </div>
  </section>
  
  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 3
      </div>
      <div>other thing</div>
    </div>
  </section>
  
</div>

Answer 1

很多代码，关键点是：

由于您有多个顶级容器，因此调用此$(".container .top-content .top");会返回多个顶部，您需要调用.each()来单独处理它们。

var topHeight = _self.height();将为您提供当前顶级容器的高度。

在你打电话给botContainer.each()这里你会得到6（在我的例子中你将获得9个底部容器，你需要过滤掉你不需要更新高度的容器，所以如果：

if (botIndex >= (bl) * (topIndex / (tl)) && botIndex < (bl) * (topIndex + 1 / (tl))) {...}

＆＃13;

$(document).ready(function() {
  var topContainer = $(".container .top-content .top");
  var botContainer = $(".container .column .bottom-container");
  tl = topContainer.length;
  bl = botContainer.length;

  topContainer.each(function(topIndex) {
    var _self = $(this);
    var topHeight = _self.height();


    botContainer.each(function(botIndex) {

      if (botIndex >= (bl) * (topIndex / (tl)) && botIndex < (bl) * (topIndex + 1 / (tl))) {

        var bc = $(this);
        bc.css({
          "margin-top": topHeight + "px",
        });
      }
    });

  });

});

＆＃13;

.container {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.top-content {
  position: absolute;
  width: 100%;
  z-index: 100;
}

.top {
  position: absolute;
  background-color: red;
}

.column {
  display: inline-block;
  height: 200px;
  width: 60px;
  background-color: gray;
}

.bottom-content {
  position: relative;
}

.bottom-content {
  width: 50px;
  height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <div class="top-content">
    <div class="top">
      Height change with dynamically content.
    </div>
    <div>other thing</div>
  </div>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 1
      </div>
      <div>other thing</div>
    </div>
  </section>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 2
      </div>
      <div>other thing</div>
    </div>
  </section>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 3
      </div>
      <div>other thing</div>
    </div>
  </section>

</div>

<div class="container">

  <div class="top-content">
    <div class="top">
      Height change with dynamically content, is always different size.
    </div>
    <div>other thing</div>
  </div>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 1
      </div>
      <div>other thing</div>
    </div>
  </section>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 2
      </div>
      <div>other thing</div>
    </div>
  </section>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 3
      </div>
      <div>other thing</div>
    </div>
  </section>

</div>


<div class="container">

  <div class="top-content">
    <div class="top">
      Height change with dynamically content, is always different size.is always different size.is always different size.
    </div>
    <div>other thing</div>
  </div>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 1
      </div>
      <div>other thing</div>
    </div>
  </section>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 2
      </div>
      <div>other thing</div>
    </div>
  </section>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 3
      </div>
      <div>other thing</div>
    </div>
  </section>

</div>

＆＃13;

使用jQuery定位同一类的元素

1 个答案: