javascript - 如何根据以前的子宽度计算 div 的宽度

Question

因此，假设具有以下内容结构：

<div class="wrapper">
    <div class="contentOne" style="width:50px"></div>
    <div class="contentTwo"></div>
    <div class="contentThree"></div>
    <div class="contentFour"></div>
</div>

我想要在页面加载时实现的是第一个 div (contentOne) 的宽度被拾取并将其他 3 个 div 的宽度增加 50px。最后，我想要以下内容：

<div class="wrapper">
    <div class="contentOne" style="width:50px"></div>
    <div class="contentTwo" style="width:100px"></div>
    <div class="contentThree" style="width:150px"></div>
    <div class="contentFour" style="width:200px"></div>
</div>

一等奖将是可能使用 CSS3 Calc。如果不是，JS将是一个亲密的第一公主。

谢谢

Answer 1

目前，CSS 没有前同级选择器（尽管出于某种原因有一个“后同级”选择器），因此尚无法实现纯 CSS 解决方案。jQuery 会是这样的：

$('div:not(:first)').each(function()
{
    $(this).width($(this).prev().width() + 50);
});

Answer 2

对此使用 Jquery。代码将是这样的。请进行适当的更改，这只是一个演示代码。

    var widthOfFirstChild=$('.wrapper').eq(1).width();
    $('.width div').each(
    function(){
    $(this).attr('style':widthOfFirstChild+50);
    widthOfFirstChild=+50
    });