用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

回答

相關問題