I have seen the use of $(this) and understand within the function, but also have seen in a selector as well, but fail to understand when or if it is valuable. Here are two examples I can use and get to work, but am I really doing anything valuable...
Here I added $(this) in selectors
(function($) {
$(".deliver").on('mouseenter',function(){
$(this).css({'width':'600px'});
$(".form_jquery",$(this)).fadeIn(1000).css({'display':'block'});
$(".componentheading",$(this)).css({'display':'none'});
}); ...
Here is my original script
(function($) {
$(".deliver").on('mouseenter',function(){
$(this).css({'width':'600px'});
$(".form_jquery").fadeIn(1000).css({'display':'block'});
$(".componentheading").css({'display':'none'});
});
I have kept what I know as the standard use of (this) in both and noting that I am using in a anonymous function in case this factors in.
$(".componentheading",$(this))
only searches the .componentheading elements under the current $(this) element (in this particular case it's a .deliver which you entered the mouse) whereas
$(".componentheading")
searches them in the whole document.
http://api.jquery.com/jQuery/#jQuery1
Providing a second argument to the jQuery function narrows the context of the selection. By default, the context is the entire document.
In the case of using $(this) as a context, you are only looking for elements with the form_jquery or componentheading classes inside of the element triggering the mouseenter handler.
Providing a context to narrow the selector searches is a good way to improve your selector performance, as long as you know that the element you're looking for can indeed be found in that context.
$( selector, context )
The actual function for jQuery looks like this jQuery( selector, context ), if you provide an element for the context value, when jQuery tries to jQuery.find your element, it will start with element you provided.
In many cases this can provide a performance boost!
Read about jQuery Context
To supply an element to the jQuery function, a lot of people employ a method called DOM caching where you store the element in a variable and pass it to the jQuery function as the referencing context.
Related
I am trying to re-write some jquery so that uses a selector I had previously created, so that it doesn't need to access the DOM again. The selector I had created already access the DOM once, and I want to use its contents in a string literal in a function.
My current code is the following:
$(this.$content[$(`.nav a[href$="${window.location.hash}"]`).parent().index()]).show();
which works just fine, but ".nav a" is accessing the DOM, which I do not want in this instance. I want to use this.$navigation, which I had created before and already has the information from the DOM. I tried writing it as
$(this.$content[$(`this.$navigation.find('a')[href$="${window.location.hash}"]`).parent().index()]).show();
where this.navigation = $("#main-nav"), the parent of the .nav elements, but it does not work in this way.
Any suggestions on how I might approach this?
The inner jQuery object should be moved outside of the string literal, and the attribute selector needs to be placed inside the find() call.
$(this.$content[$(this.$navigation).find(`a[href$="${window.location.hash}"]`).parent().index()]).show();
In addition, I would assume from the naming convention that $navigation already holds a jQuery object so does not need to be wrapped again. As such, this should work:
$(this.$content[this.$navigation.find(`a[href$="${window.location.hash}"]`).parent().index()]).show();
I saw example code on https://github.com/lukemelia/jquery-ui-ember. Can some one tell me what is this.$()
you can see this on jquery-ui-ember-master\jquery-ui-ember-master\js\app.js
this.$() is a call of the $-method of your current objectscope.
this refers to your current object.
$ is a function of this.
() will call the function $ of this.
When you create a Component, in its code this.$() gives you a jQuery object reference, set to the element that was inserted into the dom by that Component (its outer tag, usually a div unless you told it otherwise). You can then use for example this.$('.myclass') to find the element with the class myclass within the section of HTML that is handled by that Component without having to specify an id attribute to find the correct set of elements.
This probably also applies to the Views, but you should be using a Component instead whenever possible.
As Leeft said this.$() will give you the reference to the jQuery object, but typically you should only want to get the reference to the jQuery object in didInsertElement where the component has been inserted into the DOM and you can do jQuery-UI stuff on the element.
I have the following set in my JS:
$('.selector').selectpicker();
When new DOM elements are added to the page, the above method doesn't work on the new DOM elements. I know that, in other cases, I can do the following such that newly added DOM elements work:
$(document).on("click", ".class-here", function() {
});
But how can a method like the first changed to work with new DOM elements (rather than calling that same method again)?
The answer will depend on the function you're calling (here selectpicker).
If you're talking about the bootstrap function, you would do:
$('.selector').selectpicker("refresh");
After having changed the DOM.
You might use the level 3 event for DOM node creation, like .on("DOMNodeInserted",(selector),(function)) to execute your function whenever an element fitting the selector is inserted. See How to catch creation of DOM elements and manipulate them with jQuery
Your problem is regarding binding new element in DOM, Prior version of jquery use bind and unbind method for new element in dom.
But If you use jQuery 1.3+ then you can write
$('selector').live('event',function (){ //do some action });
In above jquery, You didn't need to bind/unbind element on DOM.
But latest version of jQuery 1.7+, You can directly use .on() method which you mentioned above, It mean that you didn't care to bind, unbind on 'DOM change'.
On() is simple that you can write common callback for multiple events on particular selector.
I hope that this details is useful to you and you got your answer. If you use 'on()' then you not need to bind element in DOM.
I would like to know why some people use
element.click();
and others use
element[0].click();
What's the difference?
Thanks
Assuming element is a jQuery object, element.click() triggers a click event on a set of HTML elements that the element consists of. It's the same as calling element.trigger("click")
element[0].click() is invoking the click method on a DOM node (not jQuery object) that is the first in the set that element consists of.
See http://api.jquery.com/click/ (first case)
and https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click (second case)
for further reference.
They are very different, so they would be used in different contexts.
One calls click on the first element of an array, the other calls click directly on whatever element is
Is it better to attach the on() event to the document or a closer parent?
Note: Initially this question had another aspect and a different topic. It became obsolete really quickly (typo in the source code)
The best key for performance using jQuery is to use an id as the initial identifier. For example:
$('#my_id').on('click', 'tag.my_class', function () {
...
});
This allows jQuery to go straight to the container, and then begin trawling from there.
if you bind the "on" event to the closest parent will produce exactly what are you looking for, click function will works fine even if it is appended to document, but in future if you append any elements with class "clickable" will also get binded. so its always good practice to append the "on" event to closest parent rather than whole document.
if you want more specific you can use
$("ul.media-grid").on('click', 'li.clickable', function () {
alert("works")
});
as it will get the ul with the class "media-grid" and appends the event to the li's with class "clickable"