This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
Closed 4 years ago.
I'm trying to get the height of my elements that contains class category. I wan't to use .each() function but it seems to return me the entire document. There's my code :
$('.category').each((index) => {
console.log($(this).height());
});
This return me :
828 (the document height)..
Any idea ?
That's because you are using an Arrow Function, which binds the this value of the enclosing context.
Use a regular Function.
$('.category').each(function(index) {
console.log($(this).height());
});
I know they look cute and all that but they are not perfect replacements for regular Functions.
Related
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 5 years ago.
I'm not sure what this is called in Javascript:
exports.withLocalCallback = () => {
return [1, 2, 3].map(x => x + 1)
}
I haven't seen this before and I can't even think of a way to google it. Can someone explain what's happening here?
It's arrow functions, and they work almost the same as normal js functions, with the difference that 'this' is bound to the scope in which the function is defined. So you don't need to bind functions to access the correct object.
The difference is none if you don't need 'this', except is another syntax, which looks more like functional language functions.
This question already has answers here:
jQuery Button Click 'this'
(3 answers)
Closed 5 years ago.
$("#subPanel").click(function() {
$("#subPanel").removeClass('btn-success');// it works
this.addClass('btn-default'); it didn't works.
I would like to get self-dom object(in this case $("#subPanel") itself) from inside the call back.
It might be easy problem, so I try to googled around.
However I couldn't get straight answer.
could you help me ??
Inspect this and you will see it's not a jquery object but a DOM element which does not have an addClass method. Try:
$("#subPanel").click(function() {
$("#subPanel").removeClass('btn-success');// it works
$(this).addClass('btn-default')
})
Example: https://jsfiddle.net/14s0h3dr/
This question already has answers here:
Javascript dynamically invoke object method from string
(5 answers)
Closed 8 years ago.
I want to use a method in which i will pass a function_name as parameter to another function.
On the other function, the parameter will be treated as a function
here's my code example
<div class="btn_crt_acct" onclick="toggle_object('register_div','slideDown');">
CREATE AN ACCOUNT
</div>
whch will call a function like this
function toggle_object(obj,fun)
{
$('#'+obj).fun('slow');
// fun => slideDown
// so $('#'+obj).fun('slow'); => $('#'+obj).slideDown('slow');
}
but i am doing something wrong as it states an error in console, $fun(..) is not a function.
How can i make it work perfectly??
Thanks
You'd do that with bracket notation
$('#'+obj)[fun]('slow');
FIDDLE
But why not use a proper event handler, and slideToggle if you intend to toggle it
$('.btn_crt_acct').on('click', function() {
$('#register_div').slideToggle();
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery each this
I have a loop that iterates over every element of a certain class:
$(".myclass").each(function(i) {
});
I'm trying to get children of that element with this.find("tag"), but it gives me an error. Inside that loop, what, does this refer to? What about $(this)?
this is the raw DOM node. If you want to use jQuery functions on it, you need to use $(this).
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 7 years ago.
I recently came across a bit of javascript in my quest to self learn the language which is a clever way of turning the string 'code wars' to C.Wars and 'Barack Hussain obama' to B.H.Obama. My question is on the use of the =>. I could not find details on it. Here is the snippet:
n.split(' ').map((v, i, a) => v.charAt(0).toUpperCase() + (i == a.length - 1 ? v.slice(1) : '.')).join('')
the syntax of map in javascript is:
arr.map(callback[, thisArg])
So would it be right to assume that the => is injecting an anonymous callback function with the parameters v, i and a. From the documentation I see that the callback function for map must contain three arguments:
currentValue
The current element being processed in the array.
index
The index of the current element being processed in the array.
array
The array map was called upon.
Is there any where I can find about the => syntax and its other uses or can someone explain it further to me?
A
That is an arrow function. It represent an anonymous function. It came with the EcmaScript 6 standard.
It does mostly the same as a regular function() {<something>} except it carries on with the "this" from the outer scope. It does not have its own "this". This means you do not need to bind "this" into the callback function anymore.
Here you can find further information.