如何通过jquery设置di​​v的高度等于下一个的高度？

my HTML code is:

我的HTML代码是:

<div class="col-xs-4 white-bg v-text">
  <div class="">
    <h4>My header</h4>
  </div>
</div>
<div class="col-xs-8 big-square">
  <a href="#">
    <img src="assets/img/neghab-03.JPG" />
  </a>
</div>

and my jquery code is:

我的jquery代码是:

$(function(){
    $(".v-text").height(($(this).next().height()+"px"));
});

I have more than 10 divs in my code with different height. I want all of them have their next div height. My code dosen't work. Could you please help me what's wrong with my jquery code?

我的代码中有超过10个div,高度不同。我希望他们所有人都有下一个div高度。我的代码不起作用。你能帮我解决一下我的jquery代码有什么问题吗?

1 个解决方案

#1

this in your code isn't anything in particular. You may have meant:

这在您的代码中并不是特别的。你可能意味着:

$(function(){
    var vtext = $(".v-text");
    vtext.next().height(vtext.height());
});

...so that you're calling height as a setter on the next div, and as a getter on the v-text div. Also note that you don't need to append the px when the value is a number, jQuery handles it.

...所以你在下一个div上调用高度作为一个setter,在v-text div上作为一个getter。另请注意,当值为数字时,您不需要附加px,jQuery会处理它。

---

Re your comment:

你的评论:

I have more than 10 divs with different height....

我有超过10个不同高度的div ...

You should have mentioned that in the question. We can use an each loop for that:

你应该在问题中提到过。我们可以使用每个循环:

$(function(){
    $(".v-text").each(function() {
        var vtext = $(this);
        vtext.next().height(vtext.height());
    });
});

Live Example:

var counter = 3;
var timer = setInterval(function() {
  if (--counter === 0) {
    clearInterval(timer);
    $(".v-text").each(function() {
      var vtext = $(this);
      vtext.next().height(vtext.height());
    });
    $("#countdown").text("done");
  } else {
    $("#countdown").text(counter);
  }
}, 800);

.v-text,
.big-square {
  background-color: #ed0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="countdown" style="font-weight: bold; color: blue">3</div>
<div class="container">
  <div class="row">
    <div class="col-xs-4 white-bg v-text">
      <div class="">
        <h4>My header</h4>
      </div>
    </div>
    <div class="col-xs-8 big-square">
      <a href="#">
        <img src="https://www.gravatar.com/avatar/ea3e7fb871c61756b961bc56c0478809?s=32&d=identicon&r=PG&f=1" />
      </a>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-4 white-bg v-text">
      <div class="">
        <h4>My header<br>Bigger</h4>
      </div>
    </div>
    <div class="col-xs-8 big-square">
      <a href="#">
        <img src="https://www.gravatar.com/avatar/ea3e7fb871c61756b961bc56c0478809?s=32&d=identicon&r=PG&f=1" />
      </a>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-4 white-bg v-text">
      <div class="">
        <h4>My header<br>Much<br>Bigger</h4>
      </div>
    </div>
    <div class="col-xs-8 big-square">
      <a href="#">
        <img src="https://www.gravatar.com/avatar/ea3e7fb871c61756b961bc56c0478809?s=32&d=identicon&r=PG&f=1" />
      </a>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

Of course, that will only make their heights equal when the DOM has been parsed, not later if an image inside the v-text element is loaded and changes its height, or if the user resizes the browser and changes the height.

当然,只有在解析DOM时才会使它们的高度相等,如果加载v-text元素中的图像并更改其高度,或者如果用户调整浏览器大小并更改高度,则不会更高。