Question

如何使用JQuery将来自父元素的padding-top值应用于其中的子div？

在下面的示例中，div.video-wrapper生成padding-top的{{1}}值。由于此值将在加载时自动生成（并且会变化），因此我无法手动应用此确切的75%值；因此，我正在寻找一种JQuery解决方案。

简而言之，我希望将padding-top中的padding-top值应用于类为div.video-wrapper的div。

以下是生成的HTML的示例：

thumbnail-inner-container

Answer 1

您可以将.thumbnail-inner-container的{{1}}设置为style.paddingTop的{{1}}。

.video-wrapper

Answer 2

因此，正如您在评论中提到的那样，padding-top: inherit是不使用jQuery的很好的解决方案。

但是，解决您的问题的jQuery方法是添加一个video-wrapper循环。对于页面中找到的每个video-wrapper，我们将其自己的类添加到'thumbnail-inner-container`子级中。

结果是一个与 Hev1 的解决方案非常相似的解决方案，其中增加了一个循环和jQuery。

您可以使用浏览器调试栏检查以下代码段的检查结果：

$(document).ready(function(){
  $(".video-wrapper").each(function(){
    var myVideo=$(this);
    var myPaddingTop=myVideo.attr('style');
    $(".thumbnail-inner-container", myVideo).attr("style", myPaddingTop);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-wrapper" style="padding-top: 75%;">
    <div class="thumbnail-outer-container">
        <div class="thumbnail-inner-container">
            <a href="#" class="yt-hd-thumbnail yt-hd-thumbnail-darken">
                <img src="https://i.ytimg.com/vi/xxxxxxxxxxx/hqdefault.jpg">
            </a>
            <iframe id="youtube_iframe1" src="https://www.youtube.com/embed/xxxxxxxxxxx?feature=oembed&amp;enablejsapi=1&amp;origin=https://safe.txmblr.com&amp;wmode=opaque" allow="autoplay; encrypted-media" allowfullscreen="" name="fitvid0" class="yt-hd-thumbnail" frameborder="0"></iframe>
        </div>
    </div>
</div>

<div class="video-wrapper" style="padding-top: 70%;">
    <div class="thumbnail-outer-container">
        <div class="thumbnail-inner-container">
            <a href="#" class="yt-hd-thumbnail yt-hd-thumbnail-darken">
                <img src="https://i.ytimg.com/vi/xxxxxxxxxxx/hqdefault.jpg">
            </a>
            <iframe id="youtube_iframe2" src="https://www.youtube.com/embed/xxxxxxxxxxx?feature=oembed&amp;enablejsapi=1&amp;origin=https://safe.txmblr.com&amp;wmode=opaque" allow="autoplay; encrypted-media" allowfullscreen="" name="fitvid0" class="yt-hd-thumbnail" frameborder="0"></iframe>
        </div>
    </div>
</div>

<div class="video-wrapper" style="padding-top: 24%;">
    <div class="thumbnail-outer-container">
        <div class="thumbnail-inner-container">
            <a href="#" class="yt-hd-thumbnail yt-hd-thumbnail-darken">
                <img src="https://i.ytimg.com/vi/xxxxxxxxxxx/hqdefault.jpg">
            </a>
            <iframe id="youtube_iframe3" src="https://www.youtube.com/embed/xxxxxxxxxxx?feature=oembed&amp;enablejsapi=1&amp;origin=https://safe.txmblr.com&amp;wmode=opaque" allow="autoplay; encrypted-media" allowfullscreen="" name="fitvid0" class="yt-hd-thumbnail" frameborder="0"></iframe>
        </div>
    </div>
</div>

父母对孩子应用相同的填充值？

2 个答案: