Question

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

这是我正在测试的小提琴 http://jsfiddle.net/y3597/171/

下面的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>

Answer 1

我认为你正在努力实现这个目标：

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

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

实现这一目标的更好方法是将儿童宽度设置为100％，这样他们就会继承父母的智慧。

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

1 个答案: