如何在循环中获取动态父级(DIV)内的动态子值

时间:2016-09-04 10:40:25

标签: javascript jquery html

我对动态对象HTML有疑问,我觉得它很复杂。我需要读取子对象的值,它在父div中是动态的,也是动态的。

我很难找到一个正确的脚本,我可以相应地读取子对象值,并在发布到服务器之前保留为组数据。

让我向您展示我的脚本示例,其下方与firefox firebug上显示的相同: -

<div id="divtrans[]" class="purchase-items">
  <input type="button" name="tripno[]" value="PB" class="field btn-field">
  <input type="text" name="busno[]" value="XX001" class="field txt-field">
  <input type="text" name="amount[]" value="500" class="field txt-field">
  <input type="button" id="btnhideshowdiv" class="hideshow-div btn-remove" style="border:solid">
  <div id="comission" style="margin-left:25px;background-color:antiquewhite">
    <label style="float:left; margin-right:100px;">Commision</label><label>Amount</label>
    <ul>
      <li>
        Advance
        <input type="text" name="txtadvance[]" value="60" />
      </li>
      <li>
        Pay Trip
        <input type="text" name="txtpaytrip[]" value="60" />
      </li>
    </ul>
  </div>
  <div id="divexpeses" style="margin-left:25px;background-color:antiquewhite">
    <label style="float:left; margin-right:100px;">Expenses</label><label>Amount</label>
    <ul>
      <li>
        Advance
        <input type="text" name="txtpetrol[]" value="70" />
      </li>
      <li>
        Pay Trip
        <input type="text" name="txtticket[]" value="70" />
      </li>
    </ul>
  </div>

</div>

<div id="divtrans[]" class="purchase-items">
  <input type="button" name="tripno[]" value="PB" class="field btn-field">
  <input type="text" name="busno[]" value="XX002" class="field txt-field">
  <input type="text" name="amount[]" value="1000" class="field txt-field">
  <input type="button" id="btnhideshowdiv" class="hideshow-div btn-remove" style="border:solid">
  <div id="comission" style="margin-left:25px;background-color:antiquewhite">
    <label style="float:left; margin-right:100px;">Commision</label><label>Amount</label>
    <ul>
      <li>
        Advance
        <input type="text" name="txtadvance[]" value="80" />
      </li>
      <li>
        Pay Trip
        <input type="text" name="txtpaytrip[]" value="80" />
      </li>
    </ul>
  </div>
  <div id="divexpeses" style="margin-left:25px;background-color:antiquewhite">
    <label style="float:left; margin-right:100px;">Expenses</label><label>Amount</label>
    <ul>
      <li>
        Advance
        <input type="text" name="txtpetrol[]" value="90" />
      </li>
      <li>
        Pay Trip
        <input type="text" name="txtticket[]" value="90" />
      </li>
    </ul>
  </div>

</div>

如您所见,我有2个divtrans []作为父母,其中每个父母都有: -

tripno[]
busno[]
amount[]

然后有一个带孩子的2 div

divcommision[]
txtadvance[]
txtpay[]

divexpenses[]
txtpetrol[]
txtticket[]

所有这些都有价值,我需要收集所有的值并写成如下字符串: -

parent1/PB,XXX001,500/60,60/70,70

parent2/PB,XXX002,1000/80,80/90,90

我已经对我的功能做了如下所示,在循环中仍然没有关于读取子值的工作: -

function readparentchildelement() {
  var tdivtrans=0;
  var dt
  tdivtrans= $('div.purchase-items').length
  for (start = 0; start < tdivtrans ; start++) {
    //$.each($('div.purchase-items').parents(), function (index, value) {
    //read parent div one by one
    alert($('.purchase-items').index(start));
    dt="parent" & start &"/"                                       

    var ch
    //then read tripno[] busno[] amount[]
    ch=$('.purchase-items').index(start).($('tripno')[start]).val());
    ch= ch & "," & $('.purchase-items').index(start).($('busno')[start]).val());
    ch= ch & $('.purchase-items').index(start).($('busno')[start]).val()) & "/";
    alert(ch);

    var chDiv1
    //read child inside divcommison

    var chDiv2
    //read child inside divexpenses

    //--loop ++ read next children
    //});
    } 
  $("#txtMyValue").Val(pr & ch & chDiv1 & chDiv2);
}

我不知道它运行的正确语法是什么,请帮助我。

1 个答案:

答案 0 :(得分:1)

对您的HTML进行一次修正。不建议使用两个具有相同ID的元素。所以,我真的建议你做一些comission和divexpeses有这些名称的类而不是id。这将使您的生活变得轻松。

我无法理解你是如何构造你要求的字符串的,因此我创建了一个虚拟对象,并将它全部打印到控制台。这是小提琴的链接(https://jsfiddle.net/sniper6/9L9of9yj/)。我修改了HTML以便作为类进行调用和反向操作。只需打开开发工具并查看控制台即可。它的内容如下:

parent 1
tripno -> PB
busno -> XX001
amount -> 500
txtadvance -> 60
txtpaytrip -> 60
txtpetrol -> 70
txtticket -> 70
--------------------
parent 2
tripno -> PB
busno -> XX002
amount -> 1000
txtadvance -> 80
txtpaytrip -> 80
txtpetrol -> 90
txtticket -> 90
--------------------