我使用jQuery从一个div获取高度并通过css将其添加到另一个
所以我有以下布局作为例子:
<div class="row">
<div class="column image">
<img src="image.jpg" />
</div>
<div class="column content">
<p>Content</p>
</div>
</div>
<div class="row">
<div class="column content">
<p>Content</p>
</div>
<div class="column image">
<img src="image.jpg" />
</div>
</div>
使用以下jQuery
function showHeight( element, height ) {
$( "div.image" ).css("height", height);
}
showHeight( "div", $( ".content" ).height() );
我将采取&#34; .content&#34;的高度。 &安培;将这个高度重现为&#34; .image&#34;
现在显然这适用于一个实例,但我希望在多个实例上使用它而不是为每个实例编写一个函数。
答案 0 :(得分:1)
您可以遍历.image
元素,并根据height
元素更改其prev('.content')
。
function updateHeight() {
// loop through all image elements
$( "div.image" ).each(function(){
// get `height` of the previous `.content` element
var contentHeight = $(this).prev('.content').height();
// set height
$(this).css("height", contentHeight);
});
}
//call one method to update
updateHeight();
这仅适用于.image
.content
之后的<div class="row">
<div class="column content">
<p>Content</p>
</div>
<div class="column image">
<img src="image.jpg" />
</div>
</div>
<div class="row">
<div class="column content">
<p>Content</p>
</div>
<div class="column image">
<img src="image.jpg" />
</div>
</div>
。我重新排序了这样的HTML:
var contentHeight = $(this).prev('.content').height();
要以任何顺序查找最接近的.content,请更改此
var contentHeight = $(this).prev('.content').height() || $(this).next('.content').height();
到
var slider = d3.slider()
.axis(false).min(minDate).max(maxDate).step(secondsInDay)
.on("slide", function(evt, value) {
temp = moment(value,"x").utc().format("MM");
console.log(temp);
//tempVal = moment(temp).unix()*1000;
dataChoro = countries.properties.filter(function(d){
return d.properties[attributeArray[temp]]
});
});
d3.select('#slider3').call(slider);