循环通过DIV行和收集行的id和列值

Question

我像个表的div，我想通过jQuery的每个格列循环和收集的列值（也行ID）

我该怎么做？代码是在此jsffiddle

https://jsfiddle.net/DTcHh/24064/

HTML

<div id="tasksTableDiv"> 
          <div class="row taskRow" id="1"> 
           <div id="description_1" 
            class="col-sm-2 taskDescriptionCol">Description 1 
       </div> 
       <div id="colour_1" 
            class="col-sm-2 taskColourCol">Blue 
       </div> 
          </div> 
       <div class="row taskRow" id="2"> 
           <div id="description_2" 
            class="col-sm-2 taskDescriptionCol">Description 2 
       </div> 
       <div id="colour_1" 
            class="col-sm-2 taskColourCol">Red 
       </div> 
          </div> 

</div> 

<button id="loopButton" type="button" 
          class="btn btn-sm btn-primary">Loop</button>    

JS

$('#loopButton').on('click',function() { 
     var ids = []; 
     var row = $('.taskRow'); 
     $.each(row, function() { 
     // get the id of each row and get the description and colour 
     // ids.push(push the id you got); 
       console.log("in loop" + row.html()); 
      }); 
    }); 

Answer 1

可以使用jQuery的.map()遍历的元素和创建提取的属性的阵列（demo） ：

$('#loopButton').on('click', function() { 
    var ids = []; 
    var rowsData = $('.taskRow').map(function(index, element) { 
    var $fields = $(this).find('div'); 
    return { 
     id: this.id, 
     label: $fields.eq(0).text().trim(), 
     description: $fields.eq(1).text().trim() 
    }; 
    }).toArray(); 

    console.log(rowsData); 
}); 

Answer 2

如果你想与普通的JavaScript

var loopButton = document.getElementById("loopButton"); 

    loopButton.addEventListener("click", function() { 
    let ids = []; 
    var rows = document.getElementsByClassName("taskRow"); 
    Array.prototype.forEach.call(rows, function(r){ 
     ids.push(r.id) 
     console.log(r.children[0].innerHTML) 
    }) 
    console.log(ids); 
    });