如何计算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的宽度？

回答

相关问题