在jQuery

时间:2016-01-19 00:27:54

标签: javascript jquery html css function

我使用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;

现在显然这适用于一个实例,但我希望在多个实例上使用它而不是为每个实例编写一个函数。

1 个答案:

答案 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);