Question

我一直在网上寻找几个小时的答案而找不到任何东西，所以我希望有人可以帮助我。

我想获取一个包装div的高度，该类的类是movie并将其应用于类movie-center的内部div。我怎么能用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

您所做的是正确的方法。确保您已正确加载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 2

请试试这个：

 /* 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 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），看看它是如何运作的。

此页面顶部的问题的ID为#question-header，因此如果您在控制台$('#question-header').height()中输入此内容，则会看到它返回36.这是因为该元素为36像素高。

因此，在没有任何参数的情况下调用.height将返回所选元素的高度。但是，我们可以通过传入一个数字来设置高度。通过将其粘贴到JS控制台来尝试这个：

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

标题现在是1000像素高！

代码的第三行基本上说：“嘿，在this文章的.movie特定实例中，找到.movie-center元素并设置高度。

所以，你去吧。一些工作代码，希望能够解释为什么/将来如何使用它。

找到类的高度并应用于另一个类

3 个答案: