如何计算孙子div的宽度?

时间:2012-07-30 12:05:19

标签: javascript jquery css html

下午好,研究员,

我遇到了一些jQuery代码问题,我似乎无法理解这个问题。

情况如下:

我正在制作(基于mysql-entries)几个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。在我内部有两个child-div(timelinecontainer和travelsall)。后者在此示例中仅包含一个“.travelcontainer”,但将来会有更多。

这段代码重复了几次,(我目前有两个“.shipcontainers”)。

我想要实现的是将div的宽度设置为“.travelcontainer”为四个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”一个data-travelid属性,还有“.travelfase”孙子。我想我可以用这种方式将它们结合在一起。

问题在于,当我有2个集装箱时,两个都是“旅行集装箱”,它将所有值加在一起。因此,data-travelid = 1的travelcontainer的宽度与具有class travelfase的所有div的宽度完全相同,而不是仅具有data-fasetravelid = 1属性的div。

我也试过这段代码(我之前用过的):

var widthTotal = 0;

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

return widthTotal;

这也有同样的效果。

有谁看到我在这里做错了什么?

提前致谢!

1 个答案:

答案 0 :(得分:1)

尝试:

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

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

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