如何在动态父（DIV）内循环时获取动态子值 [英] How To Get Dynamic Child Value Inside Dynamic Parent (DIV) While Loop

问题描述

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

我很难找到一个正确的脚本，在那里我可以读取子对象的值并在发布到服务器之前保存为组数据。

让我向您展示一个与firefox萤火虫上显示的脚本相同的示例： -

 < div id =divtrans []class =purchase-items> 
< input type =buttonname =tripno []value =PBclass =field btn-field> 
< input type =textname =busno []value =XX001class =field txt-field> 
< input type =textname =amount []value =500class =field txt-field> 
< input type =buttonid =btnhideshowdivclass =hideshow-div btn-removestyle =border：solid> 
< div id =comissionstyle =margin-left：25px; background-color：antiquewhite> 
< label style =float：left; margin-right：100px;> Commision< / label>< label>金额< / label> 
< ul> 
< li> 
 Advance 
< input type =textname =txtadvance []value =60/> 
< / li> 
< li> 
付款旅行
< input type =textname =txtpaytrip []value =60/> 
< / li> 
< / ul> 
< / div> 
< div id =divexpesesstyle =margin-left：25px; background-color：antiquewhite> 
< label style =float：left; margin-right：100px;>费用< / label>< label>金额< / label> 
< ul> 
< li> 
 Advance 
< input type =textname =txtpetrol []value =70/> 
< / li> 
< li> 
付款旅行
< input type =textname =txtticket []value =70/> 
< / li> 
< / ul> 
< / div> 
 
< / div> 
 
< div id =divtrans []class =purchase-items> 
< input type =buttonname =tripno []value =PBclass =field btn-field> 
< input type =textname =busno []value =XX002class =field txt-field> 
< input type =textname =amount []value =1000class =field txt-field> 
< input type =buttonid =btnhideshowdivclass =hideshow-div btn-removestyle =border：solid> 
< div id =comissionstyle =margin-left：25px; background-color：antiquewhite> 
< label style =float：left; margin-right：100px;> Commision< / label>< label>金额< / label> 
< ul> 
< li> 
 Advance 
< input type =textname =txtadvance []value =80/> 
< / li> 
< li> 
付款旅行
< input type =textname =txtpaytrip []value =80/> 
< / li> 
< / ul> 
< / div> 
< div id =divexpesesstyle =margin-left：25px; background-color：antiquewhite> 
< label style =float：left; margin-right：100px;>费用< / label>< label>金额< / label> 
< ul> 
< li> 
 Advance 
< input type =textname =txtpetrol []value =90/> 
< / li> 
< li> 
付款旅行
< input type =textname =txtticket []value =90/> 
< / li> 
< / ul> 
< / div> 
 
< / div> 
  

正如你所看到的，我有两个divtrans []作为父母，每个父母都有： -

  tripno [] 
 busno [] 
金额[] 
  

然后有一个2格与孩子也是

  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 
（start = 0; start< tdivtrans; start ++）{
 // $。每一个（$（'div.purchase-items'））父母（），函数（索引，值）{
 //读取父div一个
 alert（$（'。purchase-items' ）.index（start））; 
 dt =parent& start&/
 
 var ch 
 //然后读取tripno [] busno [] amount [] 
 ch = $（'。purchase-items'）。index（start）。（$（'tripno'）[start]）。val（））; 
 ch = ch& ，& $（购买项）指数（开始）（$（ BUSNO）[开始]）VAL（））。; 
 ch = ch& $（'。purchase-items'）。index（start）。（$（'busno'）[start]）。val（））& /; 
 alert（ch）; 
 
 var chDiv1 
 //读取子元素divcommison 
 
 var chDiv2 
 //读取子元素divexpenses 
 
 // --loop ++读下一个孩子
 //}）; 
} 
 $（＃txtMyValue）。Val（pr& ch& chDiv1& ChDiv2）; 
} 
  
我不知道使用它的正确语法，请帮助我。  
 
解决方案
对您的html进行一次更正。不建议有两个具有相同ID的元素。所以，我真的建议你让这些名字而不是身份证号码进行委任和转职。这会让你的生活变得简单。
 
 
 
我无法理解你如何构造你所请求的字符串，因此我创建了一个虚拟对象，并且正在打印这一切都在控制台上。这里是链接到小提琴（ https://jsfiddle.net/sniper6/9L9of9yj/ ） 。我已经修改了HTML以将职务和跳转作为类。只需打开开发工具并查看控制台。它看起来像这样：
 父母1 
 tripno  - > PB 
 busno  - > XX001 
金额 - > 500 
 txtadvance  - > 60 
 txtpaytrip  - > 60 
 txtpetrol  - > 70 
 txtticket  - > 70 
 -------------------- 
父母2 
 tripno  - > PB 
 busno  - > XX002 
金额 - > 1000 
 txtadvance  - > 80 
 txtpaytrip  - > 80 
 txtpetrol  - > 90 
 txtticket  - > 90 
 -------------------- 
  
 
I have question regarding dynamic object HTML where I think it's complicated. I need to read value of children object where it's dynamic inside parent div also dynamic.

It's so hard to me to find a right script where I can read children object value accordingly and keep as a group data before post to server.

Let me show you an example of my script below same as appear on 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>
As you can see I have 2 divtrans[] as parent where each parent have:-
tripno[]
busno[]
amount[]
then have a 2 div with children also
divcommision[]
txtadvance[]
txtpay[]

divexpenses[]
txtpetrol[]
txtticket[]
All this have value and I need to collect all value and write like below as string:-
parent1/PB,XXX001,500/60,60/70,70

parent2/PB,XXX002,1000/80,80/90,90
What I already done on my function like this below where still not working regarding read children value while loop:-
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);
}
I don't know what a right syntax to make it run, please help me. 
解决方案
One correction to your html. It is not recommended to have two elements with same id. So, I would really suggest you to make comission and divexpeses have classes with these names and not as ids. This will make your life much easy.

I was unable to understand how you construct the string you are requesting, hence I've created a dummy object and I'm printing it all to the console. Here is the link to to the fiddle (https://jsfiddle.net/sniper6/9L9of9yj/). I've modified the HTML to have comission and divexpese as classes. Just open the dev tools and check out the console. It reads something like this:
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
--------------------


                        
这篇关于如何在动态父（DIV）内循环时获取动态子值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！