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");
Related
I have cloned an element using clone():
var clone = $('#orig').clone();
The clone works fine, but I having some trouble trying to select elements inside it by ID.
All nested elements have the same ID as the original ones, and I need to manipulate some before appending them to the page...
I am trying something like this for example:
alert(clone.filter("#Full").attr('id'));
Could you help me on that?
The snippet you provided in your question works fine!
Just replace filter with find.
See this fiddle: http://jsfiddle.net/Pkv7S/
However, yes, you should be wary of duplicate IDs.
Try this way
var clone = $('#orig').clone();
clone.attr('id','orig1');
check it here http://jsfiddle.net/3tWks/
Firstly, use classes instead of IDs. IDs should always be unique within a document, and may result in unpredictable behaviour if cloned (if you want the cloned elements to have IDs, by all means assign new ones when you clone!)
That said, you want to be using .find instead of .filter to find elements nested within your clone element:
clone.find(".myClassName")
/* or */
clone.find("#Full")
.find – jQuery Docs
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');
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')
I use .append to add to a div
$(this).append('<ul><li>test</li></ul>');
how can I search for a <ul> and remove it if it exists in the children of $(this)?
You could use remove(). More information on jQuery remove().
$(this).children("ul").remove();
Note that this will remove all ul elements that are children.
The opposite of .append() is .prepend().
From the jQuery documentation for prepend…
The .prepend() method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the last child, use .append()).
I realize this doesn’t answer the OP’s specific case. But it does answer the question heading. :) And it’s the first hit on Google for “jquery opposite append”.
Use the remove() method:
$(this).children("ul").remove();
What you also should consider, is keeping a reference to the created element, then you can easily remove it specificly:
var newUL = $('<ul><li>test</li></ul>');
$(this).append(newUL);
// Later ...
newUL.remove();
just had the same problem and ive come across this - which actually does the trick for me:
// $("#the_div").contents().remove();
// or short:
$("#the_div").empty();
$("#the_div").append("HTML goes in here...");
Opposite up is children(), but opposite in position is prepend().
Here a very good tutorial.
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.