如何計算grandchildren div的寬度？

我遇到了一些jQuery代碼的問題，我似乎無法把握這個問題。

的情況如下：

我做（基於MySQL的條目）一對夫婦的div的。也許是更好的，如果我告訴你，結果第一：

<div class="shipcontainer" id="shipcontainer1"> 
    <div class="timelinecontainer" id="timelinecontainer1">timeline--></div> 
    <div class="travelsall" data-ship="1"> 
     <div class="travelcontainer" data-travelid="1" data-ship="1" id="travelcontainer1"> 
     <div class="fasecontainer" data-travelid="1" data-ship="1"> 
      <div class="Mobilize travelfase" date-days="6" date-fasetravelid="1">1: Mobilize </div> 
      <div class="Loading travelfase" date-days="12" date-fasetravelid="1">2: Loading</div> 
      <div class="Boating travelfase" date-days="20" date-fasetravelid="1">3: Boating</div> 
      <div class="Discharge travelfase" date-days="6" date-fasetravelid="1">4: Discharge</div> 
     </div> 
     <div class="options" id="optionstravel1" data-travelid="1">OPTIONS</div> 
     </div> 
    </div> 
</div>

正如你所看到的，我有一個shipcontainerdiv。在我有兩個孩子divs（timelinecontainer和travelsall）。後者在本例中僅包含一個「.travelcontainer」，但將來會有更多。

這段代碼重複了幾次，（我目前有兩個「.container」）。

我想實現的是將「.travelcontainer」的div寬度設置爲四個div與「.travelfase」的寬度之和。這是我的jQuery代碼：

var totalWidth = 0; 

$(".travelcontainer").width(function() { 
    var travelID = $(this).data(travelid); 

    $(this).find('div[data-fasetravelid=' + travelID + ']').each(function (index, element) { 
    totalWidth = $(this).innerWidth() + totalWidth; 
    }); 

    return totalWidth; 
});

因爲，在它通過解析PHP，我給「.travelcontainer」一個數據travelid屬性，並且還的「.travelfase」孫子。我想我可以用這種方式將他們結合在一起。

問題是，當我有兩個shipcontainer，同時有一個「travelcontainer」它將所有值加在一起。因此travelcontainer與data-travelid = 1，其寬度與所有div類的travelfase完全相同，而不是僅具有data-fasetravelid = 1屬性的div。

我也試過這個代碼（我以前使用）：

var widthTotal = 0; 

$(".travelcontainer").width(function() { 
    $(".travelcontainer > .travelfase").each(function (index, element) { 
    widthTotal = $(this).innerWidth() + widthTotal; 
    }); 
}); 

return widthTotal;

這也有同樣的效果。

有沒有人看到我在做什麼錯在這裏？

在此先感謝！

來源

2012-07-30 Djerro Neth

你注意到了'數據''主場迎戰日期'混亂呢？ – jensgram 2012-07-30 12:07:33

那麼travelfadese DIVs是旅行者DIV的孩子，所以通常後者會被孩子拉伸。還是有絕對的定位？ – Utkanos 2012-07-30 12:08:55

@jensgram：非常尖銳，謝謝！儘管如此，沒有喜悅，效果也是如此。我認爲選擇器有問題，因爲 var travelIDa = $（「＃travelcontainer1」）。data（travelid）; alert（「hoi」+ travelIDa）; 不會做任何事情。奇怪。 – 2012-07-30 12:17:39

嘗試：

$(".travelcontainer").each(function() { 
    var totalWidth = 0; 

    $('.travelfase', this).each(function() { 
    totalWidth += $(this).width(); 
    }); 

    $(this).width(totalWidth); 
});

來源

2012-07-30 12:13:16

這個伎倆！我已經使它變得複雜，非常感謝你:) – 2012-07-30 12:21:19

如何計算grandchildren div的寬度？

回答

相關問題