找到班級的高度，並適用於其他班級

Question

我一直在網上尋找答案几個小時，找不到任何東西，所以我希望有人能幫助我。

我想要一個包裝類div的高度爲movie，並將其應用於內部div，其班級爲movie-center。我如何使用JS或jQuery來做到這一點？我是一個新手，當談到JS，所以我會非常感謝，如果你可以爲我一切（包括任何需要的HTML）。

謝謝！

編輯1：也許如果我解釋我在做什麼，人們會有更好的理解。我正在製作一個響應式WordPress主題。由於瀏覽器的寬度較小，電影寬度較小。我希望疊加標題和圖形留在中心。我試着用CSS做這件事，除非我知道確切的高度（我不會因爲調整大小），否則它不能完全完成。

編輯2：這裏是瀏覽器的HTML渲染代碼：

<article id="movie-97" class="post-97 movie type-movie status-publish hentry"><a href="http://localhost:8888/movies/hard-truth-levity-hope"> 

<div class="movie-center"> 

    <div class="movie-overlay"> 

     <div class="movie-play"></div> 

     <h2 class="movie-title">Hard Truth, Levity and Hope</h2> 

    </div> <!-- end .movie-overlay --> 

</div> <!-- end .movie-center --> 

<div class="movie-thumb"><img width="480" height="270" src="http://localhost:8888/wp-content/uploads/2014/03/truth-levity-hope.jpg" class="attachment-movie-thumb wp-post-image" alt="Hard Truth, Levity and Hope" /></div> 

編輯3：Here's a Pastebin for my website。注意：它已被剝離，只顯示網站的重要部分。

Answer 1

請試試這個：

/* Get height of .movie thumb preview */ 
       jQuery(document).ready(function($) { 
        $('.movie').each(function() { 
        var h = $(this).height(); 
        console.log(h); 
        $(this).find('.movie-center').first().css('height',h); 
         console.log($(this).find('.movie-center').first().height()) 
        }); 
       }); 

Answer 2

你做了什麼是正確的做法。請確保你正確加載jQuery和嘗試包DOM準備處理$(document).ready(function() {...});或較短的形式$(function() {...});

$(function() { 
    $('.movie').each(function() { 
     var h = $(this).height(); 
     $(this).find('.movie-center').height(h); 
    }); 
}); 

---

編輯裏面的代碼：由於您使用WordPress的，有可能在這裏發生衝突發生，嘗試使用方法：

jQuery(document).ready(function($) { 
    $('window').resize(function() { 
     $('.movie').each(function() { 
      var h = $(this).height(); 
      $(this).find('.movie-center').height(h); 
     }); 
    }).resize(); 
}); 

Answer 3

康納，

這將讓你，你找什麼：

jQuery(document).ready(function($) { 
    $('.movie').each(function() { 
    var h = $(this).height(); 
    $(this).find('.movie-center').height(h); 
    }); 
}); 

快速說明。你會注意到jQuery的.height（）函數被調用了兩次。首先，沒有任何參數，然後通過h。

拉起你的JS控制檯（cmd+opt+j，如果你使用的是Chrome），看看它是如何實際工作的。

這個頁面頂部的問題有一個#question-header的ID，所以如果你在控制檯$('#question-header').height()中輸入這個值，你會看到它返回36.這是因爲那個元素是36像素高。

因此，不帶任何參數調用.height將返回所選元素的高度。但是，我們可以通過傳入一個數字來設置高度。通過對JS控制檯粘貼此試試這個：現在

$('#question-header').height(1000)

標題是高度大於1000像素！

代碼的第三行基本上說，「咦，.movie文章this特定實例中，找到.movie-center元素，並將高度。

所以，你去那裏。有些工作代碼和希望的解釋究竟爲什麼/如何在將來使用它