giving different data() based on the element in one call - javascript

I'm trying to do something like this:
$('a').data('goto', this.href)
I realize I can do this in an each() call but is there a way to do this in one shot?

each is the most succinct way to do this. Unlike some functions (such as attr), data doesn't support the "pass a function and have it called for every element" convention.
Why do you need a duplicate of the href, though?

.data() doesn't have a callback method like .attr() for instance, so probably not. Using the .each() is probably the quickest way.

Related

How to store and reuse a combination of selector and context expressions in a single variable?

I've recently come to enjoy using this pattern of JQuery selector that I suppose you could describe as a syntactical shortcut for the .find() API:
$('.some-element', '.within-context')
There's a discussion about it on SO here
Anyway, I find myself in the situation where I'd like to store this selector as a variable that I can use in multiple places in my script.
Obviously I can't do this: var selector = '.some-element', '.within-context' as that would just leave me with a variable holding '.within-context'
'.some-element, .within-context' is something entirely different...
And despite sleuthing around the docs and SO, I'm not even sure what this does: $(['.some-element', '.within-context'])
Not really sure what else to try, should I just make two variables?
Consider using the spread operator to expand the $'s arguments from an array. This way you can store a selector combination in an array and pass it later on as two distinct arguments to the jQuery constructor.
For example:
let someSelectorCombo = ['.some-element', '.some-context']; // Store the selector
$(...someSelectorCombo).text('Yay') // Expand the stored selector to two arguments
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-context">
<div class="some-element"></div>
</div>
Why not just $('.within-context .some-element')?
Or if you still wanna use context, you can use apply, but I see not much point
var selectorWithContext = ['.some-element', '.within-context'];
$.apply(null, selectorWithContext);

simple way rather than to call a function repeatedly in javascript

I have a function and some input element(s) will use that for a purpose.
i tried to make an array of them and pass to that function, but failed.
$("#txtFirst").change(function(){validateForm($(this));});
$("#txtLast").change(function(){validateForm($(this));});
$("#txtNick").change(function(){validateForm($(this));});
how to make it more simple, rather than use same format repeatedly?
You can target multiple elements in one selector :
$("#txtFirst, #txtLast, #txtNick").change(function(){validateForm($(this));});
Try this:
$("#txtFirst, #txtLast, #txtNick").change(function(){validateForm($(this));});

is there a difference between the jquery code here?

Here is the code block a
$('ul.filter li').each(function() {
$(this).click(function(e) { //do something });
});
Here is code block b
$('ul.filter li').click(function(e) { //do something });
Don't these do the same thing? is one better than the other? Which one is the better/faster method?
I would assume block b since it has less code but I want to confirm it here, thanks
The effect you see will be the same, but in the first case, every li element is assigned a new function, as you are creating the function object inside the each callback.
In the second case, there exists only one copy of the event handler, which means it uses less memory over all (although this is probably not measurable).
Internally, click calls on (in jQuery 1.7), which is iterating over the elements via each as well:
return this.each( function() {
jQuery.event.add( this, types, fn, data, selector );
});
This is the case with many jQuery methods (most often noted in the documentation), so you are saving characters and memory by letting jQuery implicitly do this.
They would both have the same effect.
I would prefer the second only because it is more concise and you're creating a single anonymous function to handle the click rather than an anonymous function per element.
For Jquery philosophy, the second is better because it is shorter.
Both are more or less same and give the same results. The second code snippet will also internally run each loop and assign the click handler to each li element.
But yes the second code snippet is very clear and simple.
The second usage is called "implicit iteration" and is one of the cornerstones of jQuery.
For example, in JavaScript Definitive Guide, 6th Ed, p.530 for jQuery Basics:
Despite the power of the each() method, it is not very commonly used,
since jQuery methods usually iterate implicitly over the set of
matched elements and operate on them all. You typically only need to
use each() if you need to manipulate the matched elements in
different ways. Even then, you may not need to call each(), since a
number of jQuery methods allow you to pass a callback function.
in http://jqfundamentals.com/chapter/jquery-basics
Implicit iteration means that jQuery automatically iterates over all
the elements in a selection when you call a setter method on that
selection. This means that, when you want to do something to all of
the elements in a selection, you don't have to call a setter method on
every item in your selection — you just call the method on the
selection itself, and jQuery iterates over the elements for you.
Typically, when the library has this built-in as the standard way of doing it, it will be in general better and faster, or else they wouldn't have built it in.

jQuery plugin: I would like to be able to access the selector from the method called.

This is a simple example. Here is the call to the method.
$('.className').somePlugin.someMethod(1);
My question is: How do I access $('.className') within the below method?
$.fn.somePlugin.someMethod = function(someNode) {
enter code here
}
I would like to dynamically get the $('.className') object from within the method as illustrated above. Any idea if this is possible without having to do something like this:
$.somePlugin.someMethod('.className', 1);
Thnaks in advance.
I've seen some mumblings about there being a selector attribute on the jQuery object. I've never tried it though. It goes like this...
$(this).selector
Take a look at jQuery end(). It may be of some use to you here.
http://api.jquery.com/end/

jquery multiple selector with a this

I see, from to time, this kind of jquery selector, which I don't really understand. What does this do in it:
$('.myClass', this).someFn();
Can someone explain to me, please?
Thanks
That searches for child elements with a class of myClass in the context of whatever this is and then calls someFn();
It would give you the same results as writing $(this).find(".myClass").someFn(); but is not as efficient.
This means that you are trying to select .myClass inside just this
The "this" keyword is something that is only meaningful inside a method of an object. It will mean something different -- or nothing at all -- depending on where you're calling this code from.
If you're calling it from inside an object (usually an HTML element), the object will be added to the selector that is passed to jQuery.

Categories