Get a jQuery element for a DOMElement - javascript

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');

Related

Find the child of the element represented by "this" that has a certain class

I know how to accomplish this if I can identify this element using a selector:
$("selector.class")
But what if my selector is the keyword this? Obviously $(this".class") isn't going to work, and I don't want to use $(this).children(".class") because then I need to extract the HTML of the element using .html(), and while I know that there will only be one element of this class in the selected element (I'm writing the HTML), JQuery doesn't, and it assumes that children() returns several elements when used with a class (at lease I think that's what it does, because
$(this).children(".class").html()
returns undefined).
Is there an other way I could do this?
Please feel free to ask for clarification, I understand this may not seem clear to some.
EDIT: some of you asked for clarification, so here it is. Let me rephrase the question: normally, when I ask JQuery to get me some elements, and give it a class as a selector it assumes I will get more than one element back and therefore $(".selector").html() doesn't work, because you can't get the HTML of several elements (at least that's my theory). Instead, I want it to recognise that in this case I am only getting 1 element back, and treat is as such. My restriction is that part of my selector is this. I hope that helped!
It isn't entirely clear to me what question you're asking so here are several different options:
To search for any subordinate tags (in the DOM tree with this as its root) that match a desired selector:
$(this).find(".myClass");
Or, if you're just trying to see if the this element has a particular class name, you can use:
if ($(this).hasClass("myClass")) {
// this element has the desired class
}
or, if the selector is more complicated than just a class, you can use .is() like this:
if ($(this).is("selector")) {
// this element matches desired selector
}
Really this isn't a selector, but I think you can do:
$(".class", this)
This is an example of supplying the context argument to the jQuery ($) function
For example (jsfiddle here),
HTML:
<div id="dis">hello
<div class="cls">
hi</div></div>
<div class="cls">
goodbye</div>
jQuery:
$(function () {
$('#dis').click(function () {
alert(
$('.cls', this).html());
});
});
will alert "hi" when the "dis" div is clicked.
Jquery is just a layer on top of JavaScript.
Just use raw javascript to get what you're looking for.
var childOfThis = this.querySelector('.myClass');

jQuery: render element to the DOM, then select it with jquery selector

Trying to understand something here: if I render something to the DOM from javascript, and want to call jQuery methods on it, it behaves differently than if I "re-select" the element from the DOM. Here's a simple example, in CoffeeScript:
element = """
<div id="my_div">TEST!</div>
"""
$('body').html(element)
element.hide() #this doesn't work.
$(element).hide() #this doesn't work either.
$('div#my_div').hide() #this does.
So, I seem to be misunderstanding something here. I guess the element variable is just a string and jQuery doesn't understand that it has been added as an element in the DOM.
Is there a different way to insert content into the dom, then, so that it behaves like a normally-selected jQuery object once it has been inserted?
The reason the first line doesn't work is because element is a string. The reason the second line doesn't work is because it ends up creating another DOM version of the string.
The fix would be to maintain a ref to the DOM version of the element the first time you construct it (in JS):
var $elem = $(element);
$elem.appendTo(document.body);
$elem.hide() // should work
Hope that helps.
I think you need:
element = $('<div id="my_div">TEST!</div>');

return a single html element with jquery

How can I get jQuery to return a html element exactly the way that getElementById does?
if I console.log($('#container')) I will get :
[<div id="container"></div>]
But the API I am interacting with obviously doesn't want that (an array) - it wants :
<div id="container"></div>
I know I can achieve this with $('#container').get(0) and a few other ways, It just seems overkill - especially as I'm selecting an ID which will always be unique.
What am I missing guys?
Thanks
If you just want a single DOM element, then just use plain javascript:
var obj = document.getElementById("container");
jQuery selectors always create a jQuery object with an array of elements in it. That's just the way it's designed. If you want a single element, you either get the first element out of the jQuery object or you use a different tool.
From a jQuery object, you can get the first object either with:
$('#container').get(0)
or with:
$('#container')[0]
But, I would argue that both are more than you need if all you want is the single object that has an id. Just use document.getElementById(). If you want less typing, you could make your own short function:
function $$(id) {
return(document.getElementById(id));
}
var obj = $$("container");
try using .html() it will return the html of the element your selecting see:
http://api.jquery.com/html/

Help me understand whats wrong with my javascript

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.

Stick ID to the HTML element (using js) instead of id-attribute?

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.

Categories

Resources