I was looking to do a .fadeIn() animation chained to this .after(), but this doesn't appear to be the way of doing it. Any suggestions?
$(clicked_item).parent().parent().parent().after(str).fadeIn("slow");
You should use .insertAfter();
$(str)
.hide()
.insertAfter($(clicked_item).parent().parent().parent())
.fadeIn("slow");
In addition to #EmreErkan's answer, try minimizing your code. Use parents() and select the id or class of the div you wish to add the text after instead of using parent() three times:
$(str)
.hide()
.insertAfter($(clicked_item).parents(selector))
.fadeIn("slow");
EDIT: As pointed out in the comments, it is better to use closest() instead of parents() if you are targeting a single element, which using parents() with a selector usually implies.
$.fn.after() will return the element it was run on (in this case $(clicked_item).parent().parent().parent()). If that is the element you want to fadeIn then I see no problem. If you want to fadeIn() the 'str' element instead I'd suggest doing this:
$(str).insertAfter($(clicked_item).parent().parent().parent()).fadeIn('slow');
A more stable way of getting a specific parent of an element that doesn't require you to change the number of .parent() calls if you change the HTML is to use .parents() together with a tag name:
$(clicked_item).parents('p').eq(0)
Change the 'p' to the element you want to reach.
Edit: woops, too late.
Related
yes i know this was ask before but i cant find the answer to my particluar problem.
this comes really close: jquery select all elements except a div and its children
but i want to select all but the div with its children inside an .on() statement, like this (simplified)
$('body').on('click', ':not(._project_overlay), :not(._project_overlay *)', globalClickHandler);
I don't get why this wont works :-/
(I also tried every variant of the above)
something like this will indeed select everything but the div and all of its children:
$('body').find(':not(._project_overlay *)')
so why on earth binds .on() to the children of the div?
please help me :(
You are using a multiple selector, which is the equivalent of a logical OR:
:not(._project_overlay) OR :not(._project_overlay *)
Therefore, it ends up matching both ._project_overlay and its descendants.
You want an AND instead, so you should simply write:
:not(._project_overlay):not(._project_overlay *)
Use :not(._project_overlay, ._project_overlay *) instead like following.
$('body').on('click', ':not(._project_overlay, ._project_overlay *)', globalClickHandler);
I have a use case where i have a parent div with only one child where the child may be strong, div, header or any other... I'm in need of a generic solution to get innerHTML of the child "Hello World"
<div id="parent">
<strong>Hello World</strong>
</div>
What is the efficient way to do this in jquery or js???
document.getElementById('parent').children[0].innerHTML
$("#parent").children();
$("#parent").children(':first');
If it's always the first child, you could do $('#parent').children().first().text(), or, to get all children, $('#parent').children().text().
Try this with jQuery:-
$("#parent").contents().filter(function(){
return this.nodeType == 3;
});
In jQuery it's easy....
$('#parent').children('strong').html();
jQuery:
$("#parent").children().html()
Just JavaScript:
document.getElementById("parent").childNodes[0].innerHTML
The suggestions to use the native childNodes[0] have a bug.
In your example HTML, there is a textNode that appears before the <strong> element you want. You would need to loop through the childNodes until you get to a non-textNode. You'd also have the same problem if you tried .firstChild.
The native DOM .children property will work in your example, but be careful: in IE8 and prior versions it also includes comment nodes.
jQuery's .children() method filters out text nodes for you, so that's a much easier way to do it.
The suggestion to use jQuery's contents() combined with .filter to filter out the text nodes will work, but is unnecessary; you could just use .children() instead and let it do the work of filtering out text nodes.
Let's say I have this HTML:
<textarea>blah</textarea>
<br>
<div class="select_this">hello!</div>
How can I select the DIV with class "select_this" when I already have the textarea identified? I don't want to use a class selector on the entire document because I'm working with a large document and class lookups are slow in older browsers.
jQuery .next() doesn't seem to do the trick, closest() only looks up the DOM tree, and .nextUntil() qualifies on everything I need except for the "select_this" div. Any other options out there?
There are two ways to do it.
Use this if you only have a few siblings:
$('textarea').nextAll('div.select_this').first();
The downside of this is that it test every subsequent element to see if it matches the selector, even after it's found the first one. Use this if you have many, many siblings, to save on evaluation:
$('textarea').nextUntil('div.select_this').andSelf().last().next();
Note also that it's better to use the first and last methods, rather than their corresponding selectors (:first, :last), because browsers don't natively understand the selectors, which slows the expression down considerably.
Edited to incorporate andSelf per comment below.
You want nextAll:
jQuery(yourTextarea).nextAll('.select_this:first');
I would like to add an inline style to the last LI that is generated with the ASP:repeater control.
I can't add a css class, i need to some how count the last li with the class called:
class="tile lower-boxes icon_email"
If I've understood your question, then the following should work for you:
$(".tile.lower-boxes.icon_email:last").css("color", "#C00");
Obviously, that selector and the CSS method can be changed to your needs. You can also add a class to the element, which would be preferable:
$(".tile.lower-boxes.icon_email:last").addClass("foo");
More info on the :last selector.
Jquery has a last function that will let you choose it functionally.
$('li.tile').last()
or you can use the :last selector
$('li.tile:last')
Edit: Fix Bad link
we can also use jQuery :last Selector..
e.g:
$("li:last").css('background-color', 'yellow');
I know the question is quite old but thought it might be helpful for others ..
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.