0

各位小伙伴们下午好

我在处理一些 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。在我有两个子 div（timelinecontainer 和 travelsall）。后者在此示例中仅包含一个“.travelcontainer”，但将来会更多。

这段代码重复了几次，（我目前有两个“.shipcontainers”）。

我想要实现的是将带有“.travelcontainer”的div的宽度设置为带有“.travelfase”的四个div的宽度之和。这是我的 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 的宽度与所有具有 travelfase 类的 div 的宽度完全相同，而不仅仅是具有 data-fasetravelid=1 属性的 div。

我也试过这段代码（我之前用过）：

var widthTotal = 0;

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

return widthTotal;

这也有同样的效果。

有人看到我在这里做错了吗？

提前致谢！

4

1 回答 1

1

尝试：

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

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

  $(this).width(totalWidth);
});
于 2012-07-30T12:13:16.927 回答