We Keep Coding

Combine after() and slideDown()

I am adding an element on a certain condition. But I don't want it suddenly appear but rather would like to slide it down. Here's how I add it:
$('.myDiv').after('<div>added content</div>');
How do I combine it with slideDown?

Try this instead :
$(".myDiv").after("<div style='display:none;'>added content</div>");
$(".myDiv").next("div").slideDown();
Good Luck !!

Try this out:
$('.myDiv').after('<div style="display:none">added content</div>').next().slideDown();

You need to use .next() on the div to which it is attached because .after()... adds the element as a sibling to the div to which it is added
Try this
$('.myDiv').after('<div style="display:none;" class="newDiv">New Content</div>');
$('.myDiv').next('.newDiv').slideDown();

first make sure the new content that you input is hidden using .newdiv{display:none;} either in your css file or inline code like: <div style="display:none;">
then use a callback function to only start after the code was inserted in the document when you used the after() method.
$('.myDiv').after('<div class="newdiv">added content</div>', function(){
$('.newdiv').slideDown();
});

Is there any way we can do append on the next element？

Like, we have <div id='target'></div><div id='footer'></div>
i just want to append <div id='target'></div> , the result will be like
<div id='target'></div><div id='target'></div><div id='footer'></div>
append just append something inside the element,
is there any Jquery method i can do this

Try this:
$("div#target").after($("div#target").clone());
Hope this will help.

$('<div />').after($('#target'))
IDs must be unique, otherwise you will have lots of problems with your selectors later on. The solution above will create a new div element and apend it after your #target

jQuery('<div />').after('div#targetdiv')

Find an element, then insert content after the next

I am struggling with this piece of code for the last few hours now.
Hopefully you can help me :)
What I try to achieve:
Find an element.
Insert html after the element that follows the elment found in (1).
Here's my HTML:
<div class="paragraph" data-template="1" data-id="1"></div>
<div class="icons"></div>
I want to insert after the element with the "icons" class, so I try:
$(data).insertAfter('.paragraph').find('[data-id="'+appendAfter+'"]').next('.icons');
.. where $(data) is a HTML string
That fails.
If I remove the next() function, it inserts before icons, but that is not what I want:
$(data).insertAfter('.paragraph').find('[data-id="'+appendAfter+'"]');
So finding the element works, but not skipping the element after that and then insert.
Cheers,
Robert

since you are looking for next , hopping the div.paragraph is closing like this
<div class="paragraph" data-template="1" data-id="1"> ..something.. </div>
<div class="icons">
if so correcting your code only
$(data).insertAfter($('.paragraph[data-id="'+appendAfter+'"]').next('.icons'));
or if div.paragraph is parent of div.icons, means not closing like above do it as
$(data).insertAfter($('.paragraph[data-id="'+appendAfter+'"]').find('.icons'));

Try this:
If the .paragraph element is the parent of .icons then next() won't work as that looks for sibling elements. You need to use find() to get the child element:
$('.paragraph[data-id="' + appendAfter + '"]').find('.icons').after(data);

I think what you want is:
$(".paragraph").next().after(data)
You might need to consider what data is - is it html, or an element?

Is this what you mean?
$('.paragraph').next('.icons').after(data);

How can I say this in jQuery?

I want to append some text after 2 closing divs to a sector element.
Click me
</div>
</div>
// this is where I want to append the text
My code appends the text after the link. How can I say "append it after the 2nd closing div"?
$('a.thingIClicked').click(function() {
$(this).append('hello');
});

The most direct way to do this is to find the second parent <div> element, and then insert the text after it.
$('a.thingIClicked').click(function() {
$(this).parent("div").parent("div").after("some text");
});
This will insert the text on the outside of the second <div> parent. Using append() will put the text on the inside of the parent, which from your example doesn't appear to be what you want.

There's probably a more elegant solution, but how about:
$('a.thingIClicked').click(function() {
$(this).parent().parent().after('hello');
});
Edit: #Zack is correct (and should probably get the answer credit for this one) - my original code would have added the text into the second enclosing div, rather than after it. I've edited my code above accordingly.

The easiest way would be to give the outer div an id and then use $("#outerdivid").
EDIT: Below will not work, but leaving it here for reference
However, you should also be able to use a jquery :parent filter:
http://api.jquery.com/filter/
$('a.thingIClicked').filter(':parent').filter(':parent').click(/**/);

Use .insertAfter()
http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');

Use .insertAfter() - http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');

How do I select the first instance of an element of a certain class enclosinga DOM element

Hi guys lets say I have the following html:
<div class="owner">
<div>
click
</div>
</div>
<div class="owner">
<div>
click
</div>
</div>
I want to put code in the onclick handler so it results in selecting the element of class 'owner' which encloses it - so I don't have to refer to the parent element by typing in this.parentNode.parentNode etc
I'd appreciate if theres a way to do it using selectors from both prototype and jquery.

$().parents(<selector>) is your friend
$(a).click(function() {
$(this).parents(".owner").css("background-color", "yellow");
})
example

Why not use this.parentNode.parentNode? If the structure is fixed, this will be faster and more efficient.
If the structure is not fixed, a jQuery way would be something like:
$(this).parentsUntil (".owner").filter (".owner");