This question already has an answer here:
How can I iterate through an Elements child nodes using Javascript?
(1 answer)
Closed 4 years ago.
So lets say I have an element that contains this:
How would I be able to run through all these children in javascript?
Use querySelectorAll (which can be directly iterated over, unlike the HTMLCollection methods):
document.querySelectorAll('table.table').forEach(table => {
// do something with each table
});
To iterate over tables seems not useful but here it is. Note I am using the class name for your tables above to find each one. If your example had different classes for each table this would not work.
var tables = document.getElementsByClassName("table");
var arr = new Array();
for (i = 0; i < tables .length; i++) {
//do what you want here
}
If you want to work with the rows and cells within a table you might want to refer to this solution.
Related
This question already has answers here:
From an array of objects, extract value of a property as array
(24 answers)
Closed 3 years ago.
I have a JSON object in a JavaScript function:
[{"PMID":31206477,"MemberID":1287,"recID":6352},
{"PMID":31202264,"MemberID":1245,"recID":5974},
{"PMID":31201299,"MemberID":1184,"recID":3012},
{"PMID":31196160,"MemberID":1241,"recID":3833}]
That is saved to an Multi-dimensional Array
Is there a better way that I can make a make a new Array with only the PMID element without looping and building it. I know that this question is close to a duplicate but I'm not interested in a merge or a concat. Currently I'm doing
var newArray = [];
for (var i = 0; i < this.pmidList.length; i++) {
newArray.push(this.pmidList[i]["PMID"]);
}
This question maybe a duplicate but if the average person can't find it based upon the title then it should not be considered a duplicate. The solution is the same but the question titles are much different.
You can use the Array.map function.
const input = [{"PMID":31206477,"MemberID":1287,"recID":6352},
{"PMID":31202264,"MemberID":1245,"recID":5974},
{"PMID":31201299,"MemberID":1184,"recID":3012},
{"PMID":31196160,"MemberID":1241,"recID":3833}];
const output = input.map(item => item.PMID);
Documentation
This question already has answers here:
Fastest way to convert JavaScript NodeList to Array?
(15 answers)
Closed 5 years ago.
How to make HTMLCollection not live?
var cells = someTable.getElementsByTagName('td');
Is live collection, meaning that when I add new td to table, cells length will increase by 1. How can I make it not live?
You have a couple of options.
One is to use querySelectorAll instead; it returns a "snapshot" NodeList:
var cells = someTable.querySelectorAll("td");
Another option is to convert it into an array:
var cells = Array.from(someTable.getElementsByTagName("td"));
Array.from is relatively new, but can be polyfilled for older browsers. Or if you want to support old browsers without polyfilling, use slice:
var cells = Array.prototype.slice.call(someTable.getElementsByTagName("td"));
This question already has answers here:
Meteor - #each iteration of an array with another HTML element inserted after each nth item
(2 answers)
Closed 6 years ago.
I'm quite new to meteor blaze. I want to know how it's possible to display something (an advert) after a particular number of iteration in meteorjs. Any ideas? Thanks in advance.
And what about doing this within the js helper? I did it in this way.
Template.foo.helpers({
stuffWithAds : function(){
col = GivenCollection.find().fetch();
toTemplate = [];
for(i=0; i<col.length; i++){
toTemplate.push(col[i]);
if (i % 2 != 0){
toTemplate.push('whatever you want to insert');
}
}
return toTemplate; }
});
This inserts whatever you want after 2 elements.
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 8 years ago.
I've simple javascript to get it's child element with the getElementsByClassName but it's not working:
var parent = document.getElementsByClassName('parent');
var child = parent.getElementsByClassName('child');
child.style.color='red';
I've tried a lot and searched to get it but some answers with for loop I've found but I wanted to do it without loop. How can I do this?
You can get the complete node list in one step
var children = document.querySelectorAll(".parent .child");
But then you'll have to loop over that node list.
If you are really interested in only the first one, then you can do
document.querySelector(".parent .child").style.color = 'red';
Try this:
var parent = document.getElementsByClassName('parent');
for(var i=0;i<parent.length;i++){
var child = parent[i].getElementsByClassName('child');
for(var j=0;j<child.length;j++){
child[j].style.color='red';
}
}
document.getElementsByClassName() return the collection. So you have to apply indexing or looping.
Multiple elements can be members of the same class. That is the point of classes.
In getElementsByClassName the word elements is plural. It returns a NodeList, not a single Element.
You can treat it much like an array. You have to loop over each of the nodes that it returns or assume that it will only return one match and use [0].
This question already has answers here:
How can I check in JavaScript if a DOM element contains a class?
(8 answers)
Check if an element contains a class in JavaScript?
(30 answers)
Closed 9 years ago.
Is there an easy way to tell if an HTML element has a specific class? For example:
var element = document.getElementById('something');
if (element.class == 'car')
Of course an element can have multiple classes, so maybe the if statement would have to be of the following form?
if (element.class.includes('car'))
var element = document.getElementById("myid");
if (element.classList.contains("myclass")) { /* do stuff */ }
Read more on element#classList here: https://developer.mozilla.org/en-US/docs/DOM/element.classList
This link also contains a polyfill for older browsers.
If using jQuery is an option you can use hasClass() see http://api.jquery.com/hasClass/
If not you can take a look at pure JS implementation - Test if an element contains a class?
For strange reasons the name of the member containing the class(es) is className, not class. Multiple class names are separated by space.
You need to use:
class = document.getElementById("{id_of_element").getAttribute("class");
then
String[] vals = class.split(" ");
var match = false;
for (i = 0; i < vals.length;i++) {
if (vals[i].equalsIgnoreCase('car') {
match = true;
break;
}
}
if (match) {
//do something
}
HTH.