For example I have something as below in HTML:
<table>
<tr>
<td class="getId">123</td>
</tr>
<tr>
<td class="getId">345</td>
</tr>
</table>
I'd like to create a for loop to loop over all the class name "getId" and store the words in an array so the output should be
var new = ['123','345'];
how may I do this?
Use jQuery map() and get() methods
// iterate and generate custom element object
var res = $('.getId').map(function() {
// get text
return $(this).text()
// get result as array
}).get();
console.log(res);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="getId">123</td>
</tr>
<tr>
<td class="getId">345</td>
</tr>
</table>With pure JavaScript use getElementsByClassName() get all elements and convert it to array using Array.from(). To generate the text array use Array#map().
var res = Array.from(document.getElementsByClassName('getId')).map(function(ele) {
return ele.textContent;
})
console.log(res);<table>
<tr>
<td class="getId">123</td>
</tr>
<tr>
<td class="getId">345</td>
</tr>
</table>Using only javascript
var x = document.getElementsByClassName('getId');
var _myArray =[]
for(var i=0;i<x.length;i++){
_myArray.push(x[i].textContent);
}
console.log(_myArray)
NOTE: You can also use innerHTML instead of textContent
To use forEach property of array you can convert the nodelist to array by
var x = document.getElementsByClassName('getId'); // document.querySelectorAll
var m =[].slice.call(x);
m.forEach(function(item){
_myArray.push(item.innerHTML)
})
you can iterate using jquery as
var values = [];
$("td.getId").each(function(){
values.push($(this).html());
});
DEMO
var values = [];
$("td.getId").each(function(){
values.push($(this).html());
});
console.log(values)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="getId">123</td>
</tr>
<tr>
<td class="getId">345</td>
</tr>
</table>use Js without Jq :)
<body>
<table>
<tr>
<td class="getId">123</td>
</tr>
<tr>
<td class="getId">345</td>
</tr>
</table>
</body>
<script>
var val = [];
var list = document.getElementsByClassName("getId");
for (var i = 0; i < list.length; i++) {
val.push(list[i].innerHTML)
}
console.log(val)
</script>
