I am learning to avoid duplicated dom queries. Recommendation so far is to save the initial query into a variable and then re-use that variable as needed.
Question:
If I save the following into a variable:
var mylist = $("ul.mylist");
Will the following make another dom query?
mylist.find("li:first");
Or will it just search within that variable?
If so, is there a better way to do it? that it would avoid another query?
Yes, it will do another "dom query". To only have 1 look-up you can save the list item node jQuery wrapper in the variable
var mylist = $("ul.mylist li:first");
Or, you can manually search within the DOM properties of the unordered list, but jQuery, I believe, won't do this for you, using the .find() method.
var mylist = $("ul.mylist");
myList[0].children[0];
// or using jquery
myList.first();
Related
I'm new to Javascript and jQuery so maybe this is a basic concept, but in the following code:
var toRemove = $("p").remove();
$("div").append(toRemove);
I remove the p element which I saw work in the UI and then I append it. Because it's removed, I would expect it to not append anything. But in the UI I see that it did. Why does it do that?
Demo: https://jsfiddle.net/4mthn93z/
Generally jQuery methods, when called on a collections of nodes, returns the same collection. This is what enables you to chain methods. E.g $("#id").html("Some contnet").hide();
Just because something has been removed from the DOM doesn't mean the javascript/jquery object has ceased to exist, it's just no longer part of the DOM. By assigning the result of the method to a variable, you have saved those objects for later use. This is actually a very handy feature.
Because toRemove is a function.
You can try..
var toRemove = $("p").remove();
$("div").append(toRemove());
I am wondering about the fastest way to get the ID of an element which wrapped in a cached jQuery object. I have n number of elements to iterate over and so I want to make sure I'm using the most efficient code possible.
Which one of these is fastest/any other suggestions? Any cost/benefit analysis would be much appreciated.
//cached jquery object using .attr()
$myElement.attr("id");
//getting the native JS element and getting the ID that way
$myElement[0].getAttribute('id');
Thanks!
The following way is the fastest:
var id = $myElement[0].id;
Here you don't call any functions, just address the object properties.
JSPerf: http://jsperf.com/jquery-get-object-property
I have been reading on best practices and I have come across this one:
Dont do this:
$("#element .child").hide()
Do this:
$("#element").find('.child').hide()
Now my question is what if i want to hide/show the .child element multiple times, should I declare it like this:
var spinner = $("#element").find('.child');
spinner.hide();
or do I just keep calling $("#element").find('.child').hide()
Should I declare it like this:
var spinner = $("#element").find('.child');
spinner.hide();
Yes. You should do exactly that since it will obviate the need for multiple dom queries.
One common best practice though, so you can easily keep track of which variables are jQuery objects and which are not, is to prefix your variable with $
var $spinner = $("#element").find('.child');
$spinner.hide();
Yes, create the spinner variable. That way the jQuery constructor/function won't be executed each time, you can reuse the once created objects. The memory overhead is negligible.
That's entirely depending of your problem, if you need to use the same element for multiples purposes in different function, the best options will be to save it into a variable, never the less if you only need once work with chaining of events
Yes, you should always try to keep your selections low, which means that you should save every element selection in a variable that you need more then once.
Try to avoid single DOM operations, also. Let me provide an example:
jQuery('#test').addClass('hide');
jQuery('#check').addClass('hide');
This will add the class "hide" to elements with the id "#test" or "#check". You can apply many jQuery functions like .addClass on element collections also, which will reduce overhead (instead for example iterating over an array / collection with jQuery.each()).
// Select both ids within one query
jQuery('#test, #check').addClass('hide');
This can lead to a huge performance boost if you are really working with the DOM, like adding options to a select box. I've put up a little benchmark on jsfiddle: http://jsfiddle.net/rrgNZ/2/
I have wriiten
document.createElement("p");
document.createElement("p")
How does Javascript intepreter knows do distinct between those two?
Id ? ( what is the Js property )? maybe something else ?
In this particular case:
document.createElement("p");
document.createElement("p")
the JavaScript runtime doesn't worry about the elements at all, because you didn't save the values returned. They're thrown away.
If you had written,
var p1 = document.createElementById('p');
var p2 = document.createElementById('p');
well then you've got two separate variables, and so you're keeping track of the difference.
It's important to be aware that the JavaScript interpreter itself doesn't really care too much about your DOM nodes. That's not really it's business. If you call methods and create objects, it's your problem to keep track of them.
Let's pick another real-life example: How does a human distinguish one orange from another one, in a basket? I look inside the basket, and notice that there're multiple orange-coloured, ball-shaped items
The JavaScript interpreter internally keeps track of the created objects. When an object isn't referred by anything (variables), the built-in Garbage Collector destroys the object.
It doesn't. createElement returns the object reference but if you don't assign it to anything or directly use it, it's lost.
var firstp = document.createElement("p");
var secondp = document.createElement("p");
Then you can assign an id or whatnot:
firstp.id = "first";
Keep in mind though, that this is not in the DOM yet. You have to insert it somewhere before it can be seen by the user/found with getElementById.
For that you can do something like this:
document.body.appendChild(firstp);
It doesn't. When you call document.createElement(), you create an element and it's inserted into the DOM. JavaScript can then grab certain p elements by ID, for example, or grab other p (and other) elements with getElementsByClassName().
If you'd assigned the returned values to variables, you'd be able to keep track of which one was which by referencing different variables. This is you distinguishing between them, not JavaScript, though.
You can refer to them by their index in the array of elemnts:
document.getElementsByTagName('p')[0]
You can assign id to them
document.getElementsByTagName('div')[0].id = 'first'
document.getElementsByTagName('div')[1].id = 'second'
And refer to them by id
document.getElementById('first')
It is up to you how you do it really...
In my javascript, I have a function which will return an element present in the HTML page .i have this stored in a variable and now want to do some kind of traversal in that using jquery methods like parent/fadeIn/fadeOut etc.
How can i do that.? My current code which returns the object is
var currentObject= GetThatObject();
Now i really want to play with this object like what we do with a typical jQuery object which we get like
var curObj=$("#tatElement")
You just do this:
var curObj = $(currentObject);
jQuery can take not only selector strings but HTML elements as arguments as well. It will just take that element, wrap it in its jQuery object and you can then use it the same way as if you had used a selector string. (It is actually a little more efficient because jQuery doesn't have to parse the selector and find the element).