下午好,研究员,
我遇到了一些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;
这也有同样的效果。
有谁看到我在这里做错了什么?
提前致谢!
答案 0 :(得分:1)
尝试:
$(".travelcontainer").each(function() {
var totalWidth = 0;
$('.travelfase', this).each(function () {
totalWidth += $(this).width();
});
$(this).width(totalWidth);
});