If I do this-
alert(anchor);
I get this-
"[object HTMLLIElement]"
... ok, yep, it is the element I want. So I want to get that elements ID.
So I test it like this:
alert(anchor.attr("id"));
... but I don't get any alert, nothing. I must not be selecting an element. What am I doing wrong, what don't I understand?
There are two problems:
.attr() is a function jQuery objects have, you have a DOM element (you would need $(anchor) to use jQuery methods against the element).
You don't need it anyway, the .id property will work (and be much faster), like this:
alert(anchor.id);
That's because attr is not a defined method or property on anchor. anchor is a raw HTML element object. It's not a jQuery object (I'm assuming you're using jQuery because you used the attr method).
To get the id, all you have to do is anchor.id. If you really want to use attr, you can do jQuery(anchor).attr("id").
if you are using jquery, then you need this:
alert($(anchor).attr("id"));
The attr() function is part of jQuery, but you're trying to get it from a plain DOM object. You either want to use $(anchor) (to wrap the element in jQuery) or call anchor.getAttribute("id") instead.
Related
I am trying to change inner html of an element. If we use this:
$('.best-photos-button')[0].innerHTML="Add More Photos";
it works fine. But if instead of ".innerHTML" i.e. JavaScript if we use .html() like this :
$('.best-photos-button').html("Add More Photos");
then it's not working. Why so?
When I am running $('.best-photos-button').innerHTML on console it's giving undefined.
$('.best-photos-button') is a jQuery object. When you use $('.best-photos-button')[0] it will return the raw DOM element, which does not have a .html() method, only .innerHtml.
So you either need to use
$('.best-photos-button').html("Add More Photos");
or use .innerHtml
Edit:
Note that if you use .html() it will affect all the elements with best-photos-button class. So depending on your use case you might need to use a different selector or filter the selection to get the specific object you need.
I know how to do the opposite. Getting a certain DOMElement for a jQuery element is easy. (Use the get() method)
But how can you get a jQuery element for a specific DOMElement?
Unfortunately this DOMElement does not have any attributes like class or id so constructing a selector is not really an option.
Lets say I have this html:
<div class="edit">Abcd<b><i><u>asdasd</u>adasda</i></b>sdfsdf<br>asd</div>
I am in the u-DomElement. How can I get this as a jQuery element?
Is there a smart way to do this?
EDIT:
I wanted to know if there is a gerneral way to do this. Not specific to the code shown above.
Like:
DomElement.toJQuery()
Is there anything like that? I am aware that this might not be possible.
Getting a jQuery object for a DOM object is as simple as jQuery(dom_node) (or $(dom_node)). See http://api.jquery.com/jQuery/
This is commonly used in event handlers, which are given the DOM node as this, so that you will often see $(this)
If you want to get just the Element use the below code. if you wanted to get the HTML of any element you might want to add the .html() tag to either of the examples
var myVar = $('.edit u');
or
var myVar = $(".edit").find("u");
Are you looking for this?
$(".edit").find("u");
hope this is what you are looking for,
$(DomElement)
you want a only 1 specific dom element i suggest you find a way to add an id to that element.
but to get an u element inside a edit class:
$('.edit u');
$('.edit').find('u');
I am unable to understand why $('#mdiv input')[1].hide(); does not work and at same time why $('#mdiv input')[1].click(); works fine?
Firstly I want to know why? Secondly how to make it working without having the id of the element?
Here is JSFiddle Link to see what i am trying and what I need
That's because you are converting the jQuery object to DOM element object which has no hide method, your second code works as DOM element object has click method like jQuery object. You can use eq method instead which returns a jQuery object.
$('#mdiv input').eq(1).hide();
If you not want to select tags by id, you can use
$('input[name="firstname"]')...
// or
$('input[type="text"][name="firstname"]')...
First post on stackoverflow. Hope everything is right!
I'm thinking of attaching an ID value to the HTML element itself via JavaScript, instead of using the HTML id attribute.
For instance, say that JavaScript variable htmlElement is a div. So htmlElement.cssName would tell us its CSS class.
Now, how about doing
htmlElement.idProperty = "someValue"
in JavaScript instead of doing <div id="someValue">? Then I can use the idProperty in say event handlers.
this.idProperty
That simple!
Is there something wrong in doing so?
EDIT: Thanks for yor answers! Very helpful and instructive. I wish I could check green on all of them!
no, you can do it the way you like it, if you are dynamically creating this item you should use this method, if you are doing this inside html I recommend you to just put the name of the id in html too.
However a small note. Use element.id instead of idProperty.
element.id = 'my-id';
You can use the createAttribute method to add an id to the element like this:
id = document.createAttribute('id');
id.value = "someValue";
htmlElement.setAttributeNode(id);
What you're doing there is adding a runtime property (in your case, called idProperty) to an HTMLElement object instance. You can get away with doing that in your JavaScript code (the Prototype library does it all the time). Makes me uncomfortable, but it does work on all major browsers.
If you want to be able to specify these in HTML markup as well, though, I'd use attributes instead. You can create attributes with any names you want, although to be careful I'd use names like data-xyz (e.g., use a data- prefix) as that's the HTML5 standard way of using your own attributes. Then you use getAttribute to get the value and setAttribute to set/update the value.
I have what I thought was a simple select with jQuery to change some text on a paragraph. It works perfect the traditional way i.e.
document.getElementById('message_text').innerHTML = "hello";
But with jQuery it doesn't. I have checked the values of $('#message_text') and sure enough I see the items.
$('#message_text').innerHTML = "hello";
Am I doing something wrong?
Anyone have any ideas?
When you do something like $('#message_text') what you have there is not a regular DOM object, but a jQuery wrapped set (even though in this case it'd only be one element.) If you wanted to access a particular DOM property, you could do this:
$('#message_text')[0].innerHTML = 'whatever';
$('#message_text').get(0).innerHTML = 'whatever';
However, this isn't necessary in this case as jQuery has two functions to do what you want:
html():
$('#message_text').html('whatever');
text():
$('#message_text').text('whatever');
The difference between the two is that html() will allow HTML while text() will escape any HTML tags you pass to it. Use the one you need over manually manipulating the HTML with innerHTML.
The jQuery function $() is not returning a HTMLElement object like getElementById() does but a jQuery object. And there you just have the html() method as equivalent to innerHTML. So:
$('#message_text').html('hello');
$('#message_text').html('hello')
jQuery selector returns an array, not a DOM Element node.