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 があります。i 内には 2 つの子 div (timelinecontainer と travelsall) があります。後者には、この例では「.travelcontainer」が 1 つしか含まれていませんが、将来はさらに増える予定です。

このコードは数回繰り返されます (現在、2 つの ".shipcontainers" があります)。

私が達成したかったのは、「.travelcontainer」で div の幅を「.travelfase」で 4 つの 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 つの shipcontainer があり、両方の「travelcontainer」を使用すると、すべての値が加算されることです。したがって、data-travelid=1 の travelcontainer の幅は、data-fasetravelid=1 属性の div だけではなく、クラス travelfase のすべての div とまったく同じです。

このコードも試しました(以前に使用したものです):

var widthTotal = 0;

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

return widthTotal;

これも同様の効果があります。

ここで私が間違っていることを誰かが見ていますか?

前もって感謝します!

4

1 に答える 1