How to get javascript control from JQuery object? - javascript

I'm a beginner in JQuery,
How can I get the control as a javascript object from a JQuery object
var _object = $(this). ??

Most common
var _object = $(this)[0];
If you have more than 1 elements matched: $(this)[0], $(this)[1], $(this)[2] and so on.
$(this).get() is also possible. It's only advantage over the array model is that it allows selection of the kind $(this).get(-1) where it gets you the last matched object

var _object = $(this)[0];
I think this is right, can't check though because I'm on my phone.

In your case, simply use this.
$(this)[0] == this if this is a DOM element. If it's something else, e.g. a selector, $(this)[0] is the way to go.

(function (e) {
var a = false;
try {
$(this)[0];
a = true;
} catch (h) {}
alert(a.toString());
})(window);

Related

how can i console the list of DOM object with javascript

when i get an element with jQuery and console.log() the element i can see all methods that i can do something with.
but when i use javascript to show element in console it just show the element itself instead of show me methods like _.style _.accessKey and so on, like when i do $(this)[0] with jQuery.
so how to see all these methods in pure javascript ?
You can try the following:-
var div = document.getElementsByTagName('div')[0];
console.table(div) or console.dir(div)
This will print out all the properties available in a neat table format.
use console.dir() to see all the methods for javascript DOM object.
You can try following ways to find html elements:
var x = document.getElementById('id');
console.log(x);
var y = document.getElementsByTagName('tag_name');
console.log(y);
var z = document.getElementsByClassName('class_name');
console.log(z);
and then list all methods and properties associated with that element by creating one new object and then call the function
function getAllMethods(object) {
return Object.getOwnPropertyNames(object).filter(function(property) {
return typeof object[property] == 'function';
}
console.log(getAllMethods("object"));

javascript: save characters/digits without libraries

I use a lot of the following expressions in my code:
document.
.getElementsBy...
.querySelector...
I need to save characters without using any libraries. That can be done by
var d = document;
Then, instead of document. I can write d. now.
I am wondering if there is a simple way to do the same thing for methods
.getElementsBy... and .querySelector....
Since these have a variable term, I cannot put the entire thing into a
variable, like var q = .querySelector(".class"), because the .class
changes almost every time.
You can create functions to avoid adding properties to the document object as shortcut if you don't want to.
function gEBI(d,id)
{
return d.getElementById(id);
}
function qS(d,s)
{
return d.querySelector(s);
}
var d = document;
var ele1 = gEBI(d,"yourID");
var ele2 = qS(d,".class");
You can make your own shortcut functions-references manually.
document.gEBI = document.getElementById;
document.gEBI(id);
But it's not a good practice to make such shortcuts.

jQuery variables objects?

When I use JavaScript it works.
var submitButton = document.getElementById("submitButton");
When I use jQuery to declare it it doesn't.
var submitButton = $('#submitButton');
I realized when debugging, jQuery is creating a object for the variable.
submitButton: Object[span#submitButton.wordButtonD]
In JavaScript
submitButton: span#submitButton.wordButtonD
How do get this to be like javaScript??
I think what you are looking for is: submitButton[0]
Just remember to check the length (greater than 0) because jQuery will return a result even though the element has not been found.
Just use Javascript and the result will be as you want. jQuery create its own object to control :). Or please explain more why do you need the result span#submitButton.wordButtonD but not Object[span#submitButton.wordButtonD]?
statement 1:
var submitButton1 = document.getElementById("submitButton");
statement 2:
var submitButton2 = $('#submitButton');
In above statements, submitButton1 is a DOM object and submitButton2 is a Jquery Object (which already warped your DOM object). Thus, If you want to get Dom object from Jquery object, just do:
var submitButton3 = submitButton2[0]
OR
var submitButton3= submitButton2.get(0)
Now, 2 Dom object submitButton1 and submitButton3 are the same.

Filter the $(this) element in loop jquery

I am trying to perform an action to other elements than the $(this) item
$('.items').click(function(){
var myitem = $(this);
$(".items").each(function() {
if (myitem == $(this)){
break;
} else {
//perform action
}
});
});
Where did I go wrong? Is there any better method?
Try to use the .not() function to filter out the current element,
$('.items').click(function(){
$('.items').not(this).each(function(){
//perform action here.
});
});
What went wrong?
When using the jQuery method (a.k.a. $) a new instance of the jQuery object is created, containing a list of elements matching your selector along side with a rich prototype of jQuery's methods.
Your mistake was to try and compare two different instances.
What you could have done was to compare the elements themselves by making the following changes:
// change this:
var myitem = $(this);
// to this:
var myitem = this;
// change this:
if (myitem == $(this)){
// to this:
if (myitem == this){
Unless you intend to use the jQuery object functionality there's no reason to initiate a new instance. Simply use the element itself when possible. It's a best practice to avoid such use cases. Performance wise.
Best solution
But the best solution in your case is what was mentioned in all other answers, using jQuery's not method to exclude the element from the newly created instance.
Using.not() to avoid
Try this
$(".items").not($(this)).each(function() {
});
OR
As per your code
$(".items").not(myitem).each(function() {
});
you can use not() to ignore the element which is clicked:
$(".items").not(this).each(function() {
});

jQuery selector - select new elements too after append/load within variable

I have:
$elements = $('.elements');
$element = $('.element');
function appendText(element){
element.append('<em> appended text</em>');
}
appendText($element);
$('button').on('click', function(){
$elements.append('<span class="element">Span Element Appended after load</span>');
appendText($element);
});
The appendText function, after button click, appends only to the initial element and that is due to JS cache I presume.
I know that I can do appendText($('element')); and the problem will be solved, but I don't want to change all my code now.
Is there any way to make jQuery consider this $element variable as not a cached element and look into the full DOM each time I call that variable?
Please find the jsfiddle if you wish to play or understand better: http://jsfiddle.net/adyz/733Xd/
If you add this:
$element = $('.element:last-child')
before
appendText($element);
I think will solve your problem
jsFindle here: http://jsfiddle.net/733Xd/5/.
Best regards!
That is an expensive thing to do. I would advise against it for performance reasons.
I did this pluggin in the beggining of last year https://github.com/fmsf/jQuery-obj-update
It doesn't trigger on every call, you have to request the update yourself:
$element.update();
The code is small enough to be pasted on the answer:
(function ( $ ) {
$.fn.update = function(){
var newElements = $(this.selector),i;
for(i=0;i<newElements.length;i++){
this[i] = newElements[i];
}
for(;i<this.length;i++){
this[i] = undefined;
}
this.length = newElements.length;
return this;
};
})(jQuery);
I think below one will solve your problem
appendText($element); //here you always referring to the node which was there initial.
http://jsfiddle.net/s9udJ/
Possible Solution will be
$(function(){
$elements = $('.elements');
$element = $('.element');
function appendText(element){
element.append('<em> appended text</em>');
}
appendText($element);
$('button').on('click', function(){
$elements.append('<span class="element">Span Element Appended after load</span>');
appendText($elements.find('span').last());
});
})
I don't think what you're asking is easily possible - when you call $element = $('.element'); you define a variable which equals to set of objects (well, one object). When calling appendText($element); you're operating on that object. It's not a cache - it's just how JS (and other programming languages) works.
The only solution I can see is to have a function that will update the variable, every time jquery calls one of its DOM manipulation methods, along the lines of this:
<div class='a'></div>
$(document).ready(function()
{
var element = $('.a');
$.fn.appendUpdate = function(elem)
{
// ugly because this is an object
// also - not really taking account of multiple objects that are added here
// just making an example
if ($(elem).is(this.selector))
{
this[this.length] = $(this).append(elem).get(0);
this.length++;
}
return this;
}
element.appendUpdate("<div class='a'></div>");
console.log(element);
});
Then you can use sub() to roll out your own version of append = the above. This way your variables would be up to date, and you wouldn't really need to change your code. I also need to say that I shudder about the thing I've written (please, please, don't use it).
Fiddle

Categories

Resources