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
2
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元素中的图像并更改其高度,或者如果用户调整浏览器大小并更改高度,则不会更高。
#1
2
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元素中的图像并更改其高度,或者如果用户调整浏览器大小并更改高度,则不会更高。