Question

下午好，研究员，

我遇到了一些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;

这也有同样的效果。

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

提前致谢！

Answer 1

尝试：

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

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

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

如何计算孙子div的宽度？

1 个答案: