javascript - Loop through each child in a div with data-attribute - Stack Overflow

admin管理员组

文章数量:1415664

I have multiple <div>s, based on a <select>, where each one contains multiple <input>s and sometimes a disabled <select> with a fixed value. Now I'm trying to loop through each of the divs and put all inputs and select values into an array and push that array into the "master" array.

However this seems not to work to well.
I feel like I'm already close but yet so far. :(

var dummy = [];
    for(var i = 1; i <= toSend.count; i++){
        var temp = [];
        $("div[data-row="+i+"]").children('input, select').each(function(){
            temp.push( $(this).val() );
        });

        dummy.push(temp);
    };

    console.log(dummy); 

toSend.count is the counting of how many div's with data-row exist.
The HTML looks like this :

<div id="container">
   <div data-row="1">
      <input type="text"/>
      <input type="text"/>
   </div>
   <div data-row="2">
     <input type="text"/>
     <input type="text"/>
  </div>
</div>  

Aaah, nevermind this was my own stupidity! I'm generating the div's via AJAX
and I copy pasted myself an error.
All div's had data-row=1, no wonder it packed all in one array >.<

I have multiple <div>s, based on a <select>, where each one contains multiple <input>s and sometimes a disabled <select> with a fixed value. Now I'm trying to loop through each of the divs and put all inputs and select values into an array and push that array into the "master" array.

However this seems not to work to well.
I feel like I'm already close but yet so far. :(

var dummy = [];
    for(var i = 1; i <= toSend.count; i++){
        var temp = [];
        $("div[data-row="+i+"]").children('input, select').each(function(){
            temp.push( $(this).val() );
        });

        dummy.push(temp);
    };

    console.log(dummy); 

toSend.count is the counting of how many div's with data-row exist.
The HTML looks like this :

<div id="container">
   <div data-row="1">
      <input type="text"/>
      <input type="text"/>
   </div>
   <div data-row="2">
     <input type="text"/>
     <input type="text"/>
  </div>
</div>  

Aaah, nevermind this was my own stupidity! I'm generating the div's via AJAX
and I copy pasted myself an error.
All div's had data-row=1, no wonder it packed all in one array >.<

• javascript
• jquery
• arrays
• custom-data-attribute

Share Improve this question Follow edited Feb 18, 2015 at 14:53 Krenor asked Feb 18, 2015 at 13:57 KrenorKrenor 6411212 silver badges2727 bronze badges 8

• So what is the problem exactly? The order of logging? That's because of how console.log works – blgt Commented Feb 18, 2015 at 14:01
• The jQuery "each" method isn't guaranteed to loop through the items in any particular order. – Chris Pietschmann Commented Feb 18, 2015 at 14:03
• I've added the HTML. @blgt No the problem is that it puts all this in one array in the whole for loop and not in an array per loop. eg. I expect to get 2 arrays when I've got 2 divs with data-row but I always get a single one back. – Krenor Commented Feb 18, 2015 at 14:03
• 1 Array or Console? If you want help, you need to post the code you're actually troubleshooting. – Chris Pietschmann Commented Feb 18, 2015 at 14:03
• @ChrisPietschmann edited it for clarity, I've just left console.log from the debugging – Krenor Commented Feb 18, 2015 at 14:07

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 3

(Edit: pays to read the code more pletely)

Since the toSend variable is just the DIVs with a data-row attribute, no need to loop over toSend to find the DIVs:

var dummy = [];

$("#container div[data-row]").each(function() {
    var temp = [];

    $(this).children("input, select").each(function() {
        temp.push(this.value);
    });

    dummy.push(temp);
});

After this, you might not even need the toSend variable at all.

Brief code for what you want to achieve.

$("div[data-row="+i+"]")each(function(){ 
    $(this).children('input, select').each(function(){
        console.log(  $(this).val());
        console.log("Child Change");
    });
      console.log("Div Change");
});

.each function from jquery is not syncrounious, use for instead.

var $tmp;

for(var i = 1; i <= toSend.count; i++)
{
     $tmp = $("div[data-row="+i+"]").children('input, select');

     for(var ii = 1,len = $tmp.length; ii <= len; ii++){
        console.log(  $tmp.eq(ii).val());
     };

     console.log("New line #" + i);
};

本文标签： javascriptLoop through each child in a div with dataattributeStack Overflow