Javascript : How why i get the .className 'underfined' but .html() work - javascript

I know this question was posted many times but I can't understand my problem :
When I do :
alert($('#CalendarType').className);
I keep getting undefined in the alert, at start by searching on the web I thought it was because my div wasn't already load but I tried something else :
alert($('#CalendarType').html());
And this work.... I can't understand . If someone can explain me what I did wrong

$(someSelector) returns a jQuery object, not a DOM object.
className is a property of a DOM object, not of a jQuery object.
You can either extract the DOM object from the jQuery object:
alert($('#CalendarType')[0].className);
Or use the jQuery attr method:
alert($('#CalendarType').attr('class'));

You can use .attr() function instead. I am sure this will work:
alert($('#CalendarType').attr("class"));

Related

Doesn't jQuery('#id') do the same thing as document.getElementById('#id') in javascript? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
document.getElementById vs jQuery
I have a function that will take all the spans with a certain class ("jobStatus") and remove an additional class from it ("orange"). I call the function from a SELECT onchange (onchange="chgJobstatus(this);"). It's working great.
However, I'm trying to get it to run on page load, based upon the selected value (this is server-side dynamically generated.)
This will work:
$(document).ready(function(){
chgJobstatus(document.getElementById("chgStatus"));
});
This will NOT work:
$(document).ready(function(){
chgJobstatus(jQuery('#chgStatus'));
});
Doesn't jQuery('#id') do the same thing as document.getElementById('#id') ??
Regarding selecting the element, yes, but jQuery selectors return jQuery objects and getElementById returns a DOM Element object, you can get the DOM Element using [index] or get(index) method:
chgJobstatus(jQuery('#chgStatus')[0]);
This will surely work. jQuery(selector) always return a jQuery object (jQuery(selector) instanceof jQuery is true ) . but you can get native dom element using .get or simply using array like syntax as below.
$(document).ready(function(){
chgJobstatus(jQuery('#chgStatus')[0]);
});
jQuery('#id') - returns a jQuery Object
document.getElementById('#id') - returns a HTML DOM Object
jQuery('#id').get(0); OR jQuery('#id')[0]; - returns a HTML DOM Object
By using jquery it will allows you to access jquery functions. if you read below links you will get an good idea.
document.getElementById vs jQuery
jQuery $() vs. document.getElementByID — differences
getelementbyid-vs-jquery-id
jquery-sharp-vs-getelementbyid
getelementbyid-vs-jquery-id
On more important thing you should know is that jQuery returns a reference to a jQuery object, not the object itself.
No, jQuery('#id') returns a jquery object, with additional functions and properties attached to it.
I'm not entirely sure what you're trying to do, but something like this could substitute all the javascript you've described.
$("#chgStatus")
.bind("change", function() {
$(".jobStatus").removeClass("orange");
}).trigger("change");

Javascript - extract object ID from a Javascript object

So I am not sure if my title is clear enough. I essentially have a div saved as a Javascript object which looks like this: [div#field_30.checkbox_group]
The field_30 is the ID which I am trying to extract here. doing something like object.id is not working. Does anyone know how to get the ID?
Note: I saved the object like this: var object = $(".workspace .selected"); which grabs the currently selected div inside the object called workspace. Sorry is this is a rookie mistake, I just can't seem to find anything anywhere. Thanks for the help...
var object = $(".workspace .selected"); will return a jQuery wrapped element that has jQuery properties and methods rather than element properties and methods. This means that any of
object[0].id
object.prop("id")
object.attr("id")
should work, but the 1st option should be the best performance-wise. It gets the id property of the the 1st element contained by the jQuery object, which is your div.
Your object is in fact a jQuery object, not a dom object.
To use the dom object use,
object[0].id
Or using, jquery, (Since it is already there)
object.prop('id');
You can use either $jquery_object.attr('id') or $jquery_object.eq(0).id
See this for exemple: http://jsfiddle.net/cquuT/
In this case it looks like object is the result of a jQuery select. To get to the actual DOM object you need to use [0]. Then you can access the id property
object[0].id
I don't see a complete answer here, so I'll provide my own.
If you're using jQuery selector $(), then you'll get jQuery-wrapped collection, not a single element.
(I assume now that you're using jQuery 1.5.2, the same as StackOverflow uses now.)
Universal solution to get ids of all elements returned by selector is:
.map(function(){ return this.id; })
Running $(".post-text").map(function(){ return this.id; }) on current page will return something like: ["", "", "", "", ""]
To get id of the first element returned by selector use:
.attr('id')
Running $("div").attr('id') on current page will return "notify-container".
Since jQuery 1.6 you can also use .prop('id') here.
If you know, that query will return only one element or you just want the first element matching given selector, then use .attr which is obviously a simpler solution.

jQuery - how to access jQuery object?

I'm struggling to find out when to use #,$ in jquery.
i.e. if I have an object
var elem{
}
How to access this?
Whether $('#elem') or $('elem')?
May be its too silly. But I cant find out a solution by googling it.
It looks to me like how to you've used .appendTo(). You need to pass an ID in your case, I believe; something like:
$("<table>").attr("id","waiterBlock").appendTo("testDiv");
Changed to:
$("<table>").attr("id","waiterBlock").appendTo("#testDiv");
The documentation for jQuery's .appendTo() says one needs to pass:
A selector, element, HTML string, or jQuery object; the matched set of elements will be inserted at the end of the element(s) specified by this parameter.

Cant get jQuery methods to work

Why is it when I select html elements using .get(i) or similar methods, I am unable to use methods on those elements like the .removeClass() or .html().
I would think that the code below is perfectly valid, yet neither lines work. What do I need to do to apply jQuery methods to an element based on its ordinal index in the DOM?
($('li').get(0)).removeClass('yourClass');
$('li')[0].addClass('myClass');
Here is an example of the issue: http://jsfiddle.net/KcNWy/2/
Check the documentation:
The .get() method grants us access to the DOM nodes underlying each jQuery object.
You can DOM object into jQuery object again: $($('li').get(0)). Or, better yet, use eq: $('li').eq(0).
And also a debugging hint. You can use in firefox/chrome/safari console.log(myObject) to see what's actually returned.
The get() method passes back the DOM object
Retrieve the DOM elements matched by the jQuery object.
Try this instead:
$("li:eq(" + 0 + ")").removeClass("yourClass")
Working example: http://jsfiddle.net/KcNWy/6/

Jquery - Reference by ID - Supposed to return an array?

I just started using jQuery, and various sources suggest that the following should be used to reference an element by ID:
$("#imgThumbnail")
theoretically making something like this possible:
$("#imgThumbnail").src;
But my testing indicates that something like $("#imgThumbnail") returns an array, making the following necessary:
$("#imgThumbnail")[0].src;
Do I really need to reference by the index of the array every time I am trying to reference something by ID (i.e., var oObj = $("#someobjectid")[0]; )?
You should get the src attribute to get the value
$("#imgThumbnail").attr('src');
This post explains what the $ function returns and various ways to use it.
$(selector)
Returns a jQuery object, which could contain a number of DOM elements.
$(selector)[0] or $(selector).get(0)
Returns the first result as an actual DOM element.
$(selector).eq(0) or $($(selector).get(0))
Returns the DOM element wrapped in a jQuery object so that we can do stuff like:
$(selector).eq(0).addClass("deleted").fadeOut();
$(specifier) will return a collection, so yes if you want to call something on an individual member you need to pick which one. In most cases though there is a collection operator you can use to achieve the same result. For instance, you could call $('#imgThumbnail').attr('src', 'value')
You should bear in mind that it's not really an array, it's a jQuery object which, among other things, allows array-style access
$(whatever)
returns the jQuery object. On the jQuery object you can do jQuery and jQuery plugin things, eg. .text() to return the text inside the element or .css("background", "pink") to make the element(s) pink.
Since src isn't a jQuery thing you cannot access it. src is however both a HTML attribute, and you can access those with the attr method:
.attr("src")` and `.attr("src", "http://www.example.com/myimage.png")
src is also a DOM-property and you can access DOM-properties using [index] or by iterating through the jQuery object with each:
.each(function(){
this.src = "http://www.example.com/myimage.png";
})
I don't think you should be using .src with jQuery.
Try $("#imgThumbnail").attr('src');
(this will read the src attribute, you set it with a second arg if you like)
See here:
http://docs.jquery.com/Attributes/attr
to set the src attribute use
$("#imgThumbnail").attr("src", value)
if you use something like a class selector or tag like so
$("img").attr("src", value)
It will modify all the image src attributes on the page. Hence the $ function returns an array.
And you do not need to reference it specifically.

Categories