I am using filter to return a particular element. I want to know why .getAttribute is not working with returned object while it is working fine with .attr(). jsfiddle
var c = $('ul li').filter(function(){
if($(this).text()=='d')
return this;
});
console.log(c.getAttribute('value'));
You are mixing javascript with jquery. getAttribute is a javascript function.
try this
console.log(c.attr('value'))
Or simple
console.log(c.val())
.getAttribute() is a method associated with DOM object not with with jQuery object.
If you want to use it you need to get DOM object like
console.log(c[0].getAttribute('value'))
or
console.log(c.get(0).getAttribute('value'))
var c is array object and not single object. Use index like below :
console.log(c[0].getAttribute('value'))
^--- 0 index
JSFiddle
Related
Before today, I thought that getElementById and $('#element') accomplished the same thing. However, when I tried the following:
// Assuming I have jQuery imported already
var $scrollHolder = $('#element');
var scrollDiv = document.getElementById("element");
scrollDiv.scrollTop = scrollDiv.scrollHeight;
//$scrollHolder.scrollTop = $scrollHolder.scrollHeight;
The commented line didn't work, and the uncommented line did. Do the two methods listed above return different things, or is there an error in my code? Should the commented line be working? I'm very confused and would appreciate insight. Thank you.
you have to get the DOM element from jQuery Object
$scrollHolder[0].scrollTop = $scrollHolder[0].scrollHeight;
or
.get( index )
$scrollHolder.get(0).scrollTop = $scrollHolder.get(0).scrollHeight;
$('#element'); is jQuery Object. It creates an array of matched Objects . But here you have id-selector so you only get one Object you can refer to the Native DOM object by using array index [index] or using .get(index).
document.getElementById("element"); is a native DOM Object
FYI
jQuery way of doing it.
.scrollTop()
.prop()
$scrollHolder.scrollTop($scrollHolder.prop('scrollHeight'));
$('#id) returns jquery objects which doesn't have native DOM properties and document.getElementById('id') returns you a native DOM element which has scrollTop property.
Note that you can make any DOM element act as jquery object by wrapping it with $( ) and you can make jquery object to DOM element by accessing index.
An other solution is using the correct jQuery-Wrapper for that:
$scrollHolder.scrollTop($scrollHolder.scrollHeight);
JQuery selector method always returns an Array of elements.
So commented line will not return what you expect.
I'm not exactly sure how to handle multiple instances like this. I know in normal JS I can simply use [0] and such.
My code is this:
location.href = $('a.test').attr('href');
I need to handle both the first instance of test and the second. Is there a simple
location.href = $('a.test')[0].attr('href');
I'm missing or such?
$('a.test')[0] return a dom element reference which does not have the method attr(), so your script will fail
use .eq(index)
location.href = $('a.test').eq(0).attr('href');
or
location.href = $('a.test:eq(0)').attr('href');
You are trying to call attr on javascript DOM object instead of using jQuery object as indexer returns the DOM object Use eq() to get jQuery object
location.href = $('a.test').eq(0).attr('href');
You can use DOM object with href instead of attr
location.href = $('a.test')[0].href;
location.href = $('a.test').eq(0).attr('href');
or you can try
location.href = $('a.test:eq(0)').attr('href');
reference eq() and :eq() and attr
This demo might help: working demo http://jsfiddle.net/CmQGu/
you can also use nth-child api demo here: http://jsfiddle.net/wYdyJ/
There are many ways you can approach this, like I showed you in demos. also if you keen read this : Difference between .eq() and .get() and :nth-child()?
API:
first : http://api.jquery.com/first/ (All the peeps up have missed this)
eq : http://api.jquery.com/eq/
nth-child : http://api.jquery.com/nth-child-selector/
Code:
alert(location.href = $('a.test').eq(0).attr('href'));
alert(location.href = $('a.test').first().attr('href'));
alert(location.href = $('a.test:nth-child(2)').attr('href'));
Hope it helps :)
A <img /> element has a data-id attribute that I want to retrieve using jQuery. I believe the .data() function can do this.
$('.photo').get(0).data('id')
Problem: When I tried using .data('id') to retrieve the attribute, I get the error:
Uncaught TypeError: Object #<HTMLImageElement> has no method 'data'
Where did I go wrong?
jsfiddle: http://jsfiddle.net/KLG3R/
like others said, your problem is the .get(0) which returns the HTML element itself, rather than a jquery object. To get a certain element, you use the :eq pseudo selector like:
http://jsfiddle.net/gunderson/KLG3R/2/
$('#result').html( $('.photo:eq(0)').data('id') );
You need to use data to a jquery object and get(0) will return the element.
$('#result').html( $('.photo').data('id') );
Check the below fiddle
http://jsfiddle.net/KLG3R/1/
$('.photo').get(0) will return the HTMLImageElement, not the jQuery object, so it doesn't have a method .data.
You should just do with: $('.photo').data('id')
use .attr() function. Like
$('#result').html( $('.photo').attr('data-id') );
Your using jQuery .get() you need to use .eq() in this case. Also your using .data() which is used to store data on the dom. You need to be using .attr() which gives you access to the attributes of the element.
$(function () {
var photos = $('.photo');
$('#result').html(photos.eq(0).attr('data-id'));
});
This should be working for you now: http://jsfiddle.net/KLG3R/4/
There are two types of an element. That is DOM object and jQuery object;
jQuery object has data() method, while DOM object like your xx..get(0) has no method data();
So, if you want to use data() method, you must ensure the object is jQuery object.
I'm using the jQueryify bookmarklet on a page so that I can call jQuery functions from the console. But everytime I invoke a jQuery function on a selected object, I get the error:
"TypeError: jQuery("li")[0].children[0].html is not a function
[Break On This Error] jQuery('li')[0].children[0].html();
I have tried this in FireBug as well as Google Chrome's Webkit console.
You are no longer working with jQuery objects when using square braces.
jQuery("li")[0]
This returns you the 1st li as a DOMElement, not a jQuery object.
jQuery("li")[0].children[0]
This returns the 1st li's 1st child as a DOMElement, not a jQuery object.
.html()
This function only works for jQuery objects. For DOMElements, you can use the .innerHTML property.
I suggest instead of dealing with DOMElements, you should continue working with jQuery objects. Try using this instead:
jQuery('li').eq(0).children().eq(0).html()
It looks like you are trying to call a jQuery function, html, on a DOM object children[0]. Try wrapping that in a jQuery object and then calling html
var temp = jQuery("li")[0].children[0];
var html = jQuery(temp).html();
Check the result of jQuery("li")[0].children[0] , it's a regular DOM object NOT a jQuery object. Without seeing your HTML i can't recommend a better selector but a cheap and dirty fix would be
jQuery(jQuery('li')[0].children[0]).html();
This will convert the DOM object result into a jQuery object which has the .html() function.
Accessing the array elements on the jquery object (using []) returns a DOMElement, which obviously doesn't have jquery's methods. You probably want to use eq() instead.
Try following
jQuery(jQuery("li")[0].children[0]).html();
or better one
jQuery("li:eq(0)").children(':eq(0)').html();
or another one
jQuery("li:eq(0)").children().eq(0).html();
even this one will work
jQuery("li").eq(0).children().eq(0).html();
I'm just starting with JQuery and am working through a tutorial vid. At one point the presenters go for javascript instead of a JQuery selector. Just wondering why the javascript getElementById below works fine when passing an object to a function, but the second one doesn't?
Thanks!
// works
addTask(document.getElementById('taskText'), evt);
// doesn't
addTask($('#taskText'), evt);
getElementById() returns a DOM element reference.
jQuery's selector returns a jQuery object. You can get the element reference from the jQuery object using
$('#taskText').get(0);
See http://api.jquery.com/get/
To add to the other answer, regarding the result, if you want to use jQuery (which is easier to read), you can get the dom node directly like so:
addTask($('#taskText')[0], evt);
$('#taskText') returns a jQuery object reference.
document.getElementById('taskText') returns a DOM element reference.
If your addTask() function doesn't know how to convert them to what it needs, then that would be the issue since one of them will need a conversion.
If you want to get the first DOM element reference from the jQuery object, you can do so with this:
$('#taskText').get(0)
So these two should be identical:
$('#taskText').get(0)
document.getElementById('taskText')
Both are not exactly same
document.getElementById('taskText'); //returns a HTML DOM Object
var contents = $('#taskText'); //returns a jQuery Object
var contents = $('#taskText')[0]; //returns a HTML DOM Object
so you have to change it to get HTML Dom Object
addTask($('#taskText')[0], evt);
As #Phil and #jfriend00 have pointed out, document.getElementById('taskText') is a DOM element, and $('#taskText') is a jQuery object. The latter is an object of all DOM elements that match the selector.
Think of it as a zero based array, you could pass in the DOM element by doing this:
addTask($('#taskText')[0], evt);