用jQuery调整与父母div相关的div

所以我有4个div。我想改变内部div的大小相比父母的div。我想动态地改变与父母的相关的子div大小。现在我已经添加了.top类，但我不知道它是否需要或者它是否有用。用jQuery调整与父母div相关的div

下面的jQuery下面

$(".top").each(function() { 
    $('.object').width($(".inner").parent().width()); 
});

CSS测试小提琴：下面

.container1 { width: 200px; background: red; padding: 2px; } 
.container2 { width: 225px; background: purple; padding: 2px; } 
.container3 { width: 250px; background: blue; padding: 2px; } 
.container4 { width: 275px; background: black; padding: 2px; } 

/* top ? */ 

.inner { width: 150px; background: gray; } 
.object { width: 100px; background: green; }

HTML：

<div class="container1 top"> 
<div class="inner"> 
    <div class="object">Text 1</div> 
</div>

<div class="container2 top"> 
<div class="inner"> 
    <div class="object">Text 2</div> 
</div>

<div class="container3 top"> 
<div class="inner"> 
    <div class="object">Text 3</div> 
</div>

<div class="container4 top"> 
<div class="inner"> 
    <div class="object">Text 4</div> 
</div>

来源

2014-09-06 mtt

U可以用百分比表示位置和大小。 – Academia 2014-09-06 14:21:14

*“基本上我想用”绿色“填充父div”“* - 为什么你不能直接给它'background-color：green'？这正是您所指的“父母divs”？ – 2014-09-06 14:22:33

@TJ container1到container4。实际上这只是一个例子。我不能只将背景设置为绿色。它必须根据父母的大小动态变化。 – mtt 2014-09-06 14:30:20

我认为你正在努力实现这一点：

$(".top").each(function() { 
    $(this).find(".object").width($(this).width()); 
});

在您的代码中，jQuery将在每个循环中检查DOM中的.object类的每个元素。当你使用（this）时，你在循环中引用当前“被选中”的元素。

更好的实现方法是将孩子的宽度设置为100％，以便他们继承父母的智慧。

来源

2014-09-06 14:29:46

作品。谢谢。 – mtt 2014-09-06 15:31:01

用jQuery调整与父母div相关的div

回答

相关问题