Is it possible to get all the elements from a webpage, and make a variable for each one? can you make variables within an each function and name them the same as their element name?
5 Answers
Yes, but be careful.
It is useful to store an element reference in a variable if it's present at load time and not changed later, but removing the div after load would cause your variable to return undefined. If the div is added after the variable is declared, you will also encounter an error.
Have a read here.
2 Comments
TeT Psy
Thanks, yeah i see it isnt the best practise, was just i thought:)
Snsa90
@TeTPsy I've been reading your comments, maybe what you want to do is, create a jQuery method which would extend all elements of a class into objects with custom functionality. You can write the method once, and from there on, each extended element would acquire the original's behavior...
As you said, it's just for fun.. so I think that this should do the trick:
$("*").each(function() {
const elmnt = $(this);
const id = elmnt.attr("id");
if(id) {
window[id] = elmnt;
}
});
This will only create variables for the DOMs that have the id defined. But you can change the rule the way you want.
1 Comment
TeT Psy
Thanks dude, i will check it out, but seems like it might work:)
Use:
var div = $('div');
div.click();
3 Comments
TeT Psy
Yes i know that way, but i need it dynamic so it can be used on any page, It needs to auto assign each element
Snsa90
@TeTPsy it's not fully clear how you want to use the stored variable. What you're describing sounds like something you would do using AngularJS where you would load different content with separate controllers. The div variable you are referring to would be something like an angular directive...
TeT Psy
Thanks for the reply, as i said its just for fun, what i mean is i want it so anyone can add the script to their webpage and it will auto make variables from their elements etc
If you wanted to bind the click event to all div elements you could easily just do:
var div = $('div');
div.click(function(){
//do something
});
1 Comment
TeT Psy
i need it dynamic, like anyone can add it to their webpage and it will auto make variables from their elements etc
A good way to shorten the jQuery selector and overhead and page performance is to use VanillaJS: http://vanilla-js.com/
Selecting object is one of the easiest thing to do with vanilla JS. I don't know what is your use case but a lot of what jQuery does is never used. If you are looking for optimization, try to live without it for a while and you might be surprised. Here are some out of the box ways to get elements in short variables.
Get all divs in your document:
var divs = document.querySelectorAll('div');
Get the first div only:
var div = document.querySelector('div');
Get a specific div:
var div = document.getElementById('somediv');
This way you can control everything (a la carte variables, rather than trying to solve all problems you might not need to solve).
$()($is a short for the function's name)