javascript - 使用 jQuery 调整与父 div 相关的 div 大小

Question

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

这是我正在测试的 fiddle 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%，这样它们将从父级继承宽度。