Combining to elements for a focus function - javascript

How would I combine two elements to use the focus function? #s_type and #s_ctry I'm trying to avoid extra code by retyping the same exact thing twice.
the way i'm trying it now doesn't work.
<script type="text/javascript">
$(document).ready(function() {
$("#s_type", "#s_ctry").focus(function() {
var first = $(this).find("option").eq(0);
if(first.val() === "0") {
first.remove();
}
});
});
</script>

You have to use a comma in the selector itself:
$("#s_type, #s_ctry")
Reference

You were nearly there! You need to combine them into one string. When you pass 2 arguments to jQuery, the second one is a context in which to match the selector, you can't provide multiple selectors as separate arguments:
$("#s_type, #s_ctry").focus(function() {
//Do stuff!
});
Alternatively, you can use the add method to add elements to the matched set:
$("#s_type").add("#s_ctry").focus(function() {
//Do stuff!
});

Related

How do I check if an element is NOT empty with jquery?

I need to check if an element is empty and if another is NOT empty. The first part of the if works but how do I check if the #dynamicForm element is NOT empty?¨
This obviously doesn't work but I need something like it:
if ($("#formButton").is(':empty') && $("#dynamicForm").is(':notempty')) {
//do stuff
}
if(!$("#dynamicForm").is(':empty')){
// code here...
}
Note the not operator (!) in front.
First of all you can check if the selected element is empty and negate it:
!$('#dynamicForm').is(':empty')
Furthermore you can check if it's not empty with jquery selector :not:
$('#dynamicForm').is(':not(:empty)')
A third way would be to select all elements, that are not empty and check the length of the jquery collection:
$('#dynamicForm').not(':empty').length
If you need this check in several places you can add your own function to jQuery:
$.fn.notEmpty = function() {
return !$(this).is(':empty')
}
you can use it like this:
if($('#dynamicForm').notEmpty())
That isn't realy clean and it's not keeping with the jquery conventions. So better extend the selectors instead of extending the functions:
$.extend($.expr[':'],{
notEmpty:function(c) {
return !$(c).is(':empty');
}
});
Now you can use it very straightforward:
if($('#dynamicForm').is(':notEmpty'))

I want Javascript code for respective jQuery function?

<script>
$(function () {
$('.headmenu li').click(function () {
$('.headmenu li').each(function (li) {
$(this).removeClass('selectedclass')
});
$(this).addClass('selectedclass');
});
});
</script>
Please give me alternative Javascript code for above jQuery Function.
You write multiple (nested) functions here:
Element.addEventlistener(event, callback) can be used to replace $.click().
Array.forEach(callback, this) can be used to replace $.each() (forEach is not (yet) available for every iterable type but you can "convert/cast" iterable types).
DOMTokenList.remove(token) can be used to replace $.removeClass() (element.classlist.remove('class').
DOMTokenList.add(token) can be used to replace $.addClass() (element.classlist.add('class').
NOTE: When using callbacks, you might need to use function.bind(this) to make sure the correct context is passed.
Please https://developer.mozilla.org/ for more information for these methods.

Opposite of not() function

I have a simple question, I've the following lines which equals to not active links:
$links.not($active).each(function()
{
//Do sth...
});
what is the opposite of the .not(...) function in JavaScript? because I need to know the active links, Any ideas !?
This is jQuery, not JavaScript. The opposite of .not is .filter.
Using $links.not($active) creates a collection with the elements from $links except the elements in $active.
To get the active links, just use the $active object:
$active.each(function()
{
//Do sth...
});
You're looking for .filter(), which returns a subset that only includes matching elements.
The opposite of not in programming is often named is
http://api.jquery.com/is/
However this will return boolean true of false so in your case you'll be wanting filter
http://api.jquery.com/filter/
Example:
$links.filter('.onlyThisClass').each(function()
{
//Do sth...
});

Is there a difference in effeciency between applying a function to a single element or a collection in jQuery?

Say you have the option to either apply a function to an individual DOM element or a list of them:
Individual:
$('#element1').click(function () {
$(this).hide();
return false;
});
$('#element2').click(function () {
$(this).hide();
return false;
});
$('#element3').click(function () {
$(this).hide();
return false;
});
Vs a collection:
$('#element1, #element2, #element3').click(function () {
$(this).hide();
return false;
});
Aside from writing less code, is there any computational benefit of applying functions to collections? Will the code run any faster?
The reason I am asking is because my elements are JS objects and I need to process them individually.
In practical terms, no, there's no appreciable difference. If you get very micro-optimisation-minded, then binding them individually runs in about 65% of the time that the multiple selector does, but, seriously, just use the multiple selector - it's more readable and much more maintainable.
Source: http://jsperf.com/jquery-selector-performance-problems
I do not think there is any performance improvement by using the second method, if there are any that will be very negligible.
But if you are looking at memory conception second method might be good since there is only one inner function created and same reference is used by all three elements.
Why not just applying the code on a class and add this class to your 3 elements :)
$('.hide').click(function () {
$(this).hide();
return false;
});
If you want the same behavior for different elements, I think it is a better to add class to elements than registering the click event for each of your elements.
and you will have this html

how to namespace many events in a Javascript object literal

I am using jQuery events to capture events across a rails app. Basically, there are a set of event captures' on DOM elements that then call other functions. What I'd like to do is provide some namespacing to these event captures and an looking for the best way:
I currently have (but like 60 of them):
$(document).ready(function(){
$('.edit-item').on('click', arc.event_handler.edit_item);
});
and would like something like the following - basically provide the edit_item so we know where to look:
$(document).ready(function(){
var events.edit_item= {
$('.edit-item').on('click', arc.event_handler.edit_item);
};
});
But this is giving me an error. I am familiar with basic object literal syntax like:
var my = {
say_my_name: function(){
alert('my name');
}
}
but not sure how to apply it with jQuery functions. How would I do this?
I am aware that there are anonymous functions for namespacing this more agressively but, honestly, just want this one change right now
thx in advance
You seem to want
var events = {
"edit_item": $('.edit-item').on('click', arc.event_handler.edit_item)
};
or
var events = {};
events.edit_item = …;
// equal to
events["edit_item"] = …; // Here you could use any expression (like a variable)
// instead of the string literal
Now events.edit_item is the jQuery object returned by the expression.
Perhaps this is useful:
var events;
$(document).ready(function(){
events = {
edit_item: $('.edit-item').on('click', arc.event_handler.edit_item),
other_item: $('.other-item').on(/* something else */),
//...
// the last item without trailing comma
};
});
Please note the commas at the end of the lines. IE however dislikes the comma after the last line, so omit it.
The events object contains the jQuery objects, so you can bind more events to it or do other jQuery operations on them.

Categories