Wouldn't this work if I want to apply a new class to all H3 tags inside the RelArtik div?
$("h3",$("#RelArtik")).addClass("underrubrik");
Thanks.
According to the documentation jQuery should accept a jQuery object as the context so there's no obvious reason why what you've written shouldn't work.
However, it also says that:
$(selector, context)
is equivalent to:
$(context).find(selector)
So you could just try:
$('#RelArtik').find('h3').addClass(...);
which is of course also equivalent to:
$('#RelArtik h3').addClass(...);
however I believe the former .find() based solution is faster.
it's the same as CSS and would work with a descendant selector
$("#RelArtik h3").addClass("underrubrik");
Alternatively you can just do:
$('#RelArtik h3').addClass('underrubrik');
Related
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 haven't found a good example of this, I have this CSS snippet.
#divname .jqplot-point-label {
color: #000000;
}
I know how to change CSS if it's just the ID, or just the class, but in this case I'm not sure what the JavaScript would look like.
I'm trying
$('#divname .jqplot-point-label').css({'color':'#000000'});
But that didn't work.
Thanks!
Make sure to wrap your code in ready handler (your code is fine but missing to use ready handler will cause your code not to work):
$(function(){
$('#divname .jqplot-point-label').css({'color':'#000000'});
});
I assume you are including jQuery in your page with correct path.
use $('#divname.jqplot-point-label') as the selector. (no space between the id and class name).
$(#divname .jqplot) is looking for an element with class .jqplot with an ancestor of #divname.
I need to pass the contents of an inside div to a function, for example myfun(string). I have tried using
myfun((this).children[0].innerHTML)
myfun((this).children[1].innerHTML)
myfun((this).children[0].children[0].innerHTML)
but none of those seem to work. I can't just pass the getElementById value because the function should be generic since it would be called by php on various <a> elements (ideally I think it should include the this. keyword).
Thanks for any help.
If you don't need it to work cross-browser, there's:
this.getElementsByClassName('label')[0]
This will fail in IE 8 and below.
If you're absolutely certain the HTML/DOM structure won't change, you could perhaps use:
this.nextSibling.children[0];
But this might have issues in browsers that consider textNodes as childNodes
in your function, "this" refers to the link, and can't be used.
a much cleaner solution would be to have myfunc know that it is going to receive an object which contains the text
javascript:
myfunc(obj){
alert(obj.childNodes[0].nodeValue);
}
html
click
<div id="target">target contents</div>
The object this will apply to the <a> tag that it calls. You need to call the parent div first and then select the children accordingly.
Try using this.parent.children[1].children[0].innerHTML
Try
this.parent.children[1].children[0].innerHTML
But you should really use dynamic IDs instead of this mess.
I have this:
var startDate = $(".startdate");
..which should select all elements with the class 'startdate'.
I then try to do the following:
startDate(".nodate").hide();
...to hide any elements with the 'nodate' css class but this fails.
I'm just guessing at syntax here, what silly mistake am I making?
Edit: the 'nodate' elements are not at the same level as the 'startdate' elements. I should have posted an XHTML snippet.
Try using filter
startDate.filter('.nodate').hide();
There are couple of ways :
$('.startdate').find('.nodate').hide();
$('.nodate','.startdate').hide()
$('.startdate > .nodate').hide()
$('.startdate').children('.nodate').hide()
$('.nodate').filter(':parent(is(.startdate))')
My preferred way is the first one, i saw the second one somewhere but didn't used it. I can't remember any other way yet. When i remember then i will update the post.
I think you want: (If to hide ALL elements with class nodate)
$(".nodate").hide()
startDate is not a function, it's a jQuery object. What you are trying to do is:
startDate.filter(".nodate").hide();
Which is the same as using directly:
$(".startdate.nodate").hide();
But ready your question again makes me think it's not very clear ;-)
Are you trying to hide elements that have both startdate AND nodate classes?
Edit: messed up has() with filter(), sorry.
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.