How can I get an element by id, and then inside this element get all elements by class name using jQuery? It's pretty easy to do this using the standard JS functions getElementById() and getElementsByClassName(), but unfortunately IE 7-8 do not support the latter.
You have a few options:
The first, using a css selector:
$('#idOfElement .classNameOfElements');
Or using find():
$('#idOfElement').find('.classNameOfElements');
Or using selector context:
$('.classNameOfElements', '#idOfElement');
It's worth noting that using the context (final) approach causes jQuery to internally implement the find() method.
References:
find().
selector context.
var byID = $("#someid");
var byClass = byID.find(".someClass");
In jquery you can get element by id as $('#some_id') and get element by class name as $('.some_class_id') please see jquery api for more details.
and to access inside elements you can do it like this $('#some_id .some_class')
Related
How it could be possible in JavaScript. Select any X element on the base of some other selector
Like. I can do it using jQuery Some thing like that
x = $('#key').children('.left').children('input');
// In this example I am using id Selection, Class Selector and Element Selector
I tried to do this using JavaScript in this way
x = document.getElementById('key')
.getElementByClassName('left')
.getElementByName('input');
But i was unsuccessfully. I also search in on over the internet but there is no usefully solution for this. But How jQuery works in this Scenario for All Browser
Using querySelectorAll:
document.querySelectorAll('#key > .left > input')
This is equivalent to jQuery version $('#key').children('.left').children('input');.
Support: IE8+.
Also note that you can also make use of getElementsByClassName (IE9+) and getElementsByName but it would be not so convenient if you really want to select direct children elements > and not all children. In this case I would go with for loops and children properties checking classes and tag names.
If you are okay with any depth elements and not only direct children I would recommend to go with getElementsByTagName.
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 want to set attributes to tag without jQuery.
I have to set this dynamically.
I understand in jQuery you just do $('html') but without jQuery, I tried Document.getElementById('html') but does not work.
How can I do this?
In the general case, the standard DOM equivalent to jQuery('element_name'); is document.getElementsByTagName('element_name');. Note that it returns a NodeList (which is like an array) and not just an HTMLElementNode.
The HTML element, as the root element, can be accessed via document.documentElement.
Setting attribute values can be done with the setAttribute('attribute_name', 'attribute_value'); method on an HTMLElementNode. The method is buggy in older versions of Internet Explorer, so you may wish to use the equivalent DOM property instead.
For example, to replace the value of the class attribute:
document.documentElement.className = "foo bar baz";
document.getElementsByTagName('html')[0].setAttribute('name','value');
I have some <TD>s without unique names. Inside them there are spans with unique classnames so I have no problem targetting the spans. How can I target the parent <td> so I can change its class?
I want to do something like $(".classname").parent("TD").className="newClassclassname".
You were close:
$('.classname').parent('td').addClass('newClassName');
Though typically it's safer to go with:
$('.classname').closest('td').addClass('newClassName');
... which doesn't assume the <td> is the immediate parent.
The reason .className doesn't work is because jQuery returns elements wrapped in the jQuery object. If you want to access the original (DOM) object you need to select the first item in the jQuery collection with [0]:
$('.classname').parent('td')[0].className = 'newClassName';
But I recommend using the jQuery function addClass() anyway since it won't interfere with existing classes.
You can do
$("span.classname").closest("td").addClass("newClassclassname");
Sorry, do you mean following code:
$(".classname").parent("TD").addClass("newClassName");
$(".classname").parent("TD")[0].className="newClassname";
$(".classname").parent().addClass("newClassclassname");
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.