Develop Reference

Cloning more than one image javascript

I'm trying to use this glitch effect in a slideshow, so it can work I have to clone the source image 3 more times. The first image works just fine, it's when I try to add the second image of the slideshow that the problem comes up. Instead of cloning que second image itself, the first image kind of reads that like one of it's clone.
Here's a fiddle of what I got so far https://jsfiddle.net/oqbf6kkc/
I think the main problem is the javascript but I can't really understand.
$(document).ready(function(){
$(".glitch-image img").clone().appendTo(".glitch-image").end()
})

Trailing commas are always a problem.
Please remove the comma present in front of nth-child selector
.glitch-image img:nth-child(2), {
Also, I am not sure about the effect you mentioned but there is some problem with your JS code as well. You are not iterating over all of the elements.
$(document).ready(function(){
$(".glitch-image img").clone().appendTo(".glitch-image").end()
})
I made some changes to your code.
Check them here.

Script affecting all images instead of only images in div that contains certain text (jQuery)

I've tried editing this code a number of ways (using if statments and each statements) with nothing working. The idea is so simple; if a div contains this specific text, I want to change the src attribute of the image in that div only.
I can't seem to figure out what I'm missing. The code below changes all the images in all divs with that class rather than just the ones that contain the specific text. I've tried to work in 'this' but apparently don't understand how it affects the function.
$(document).ready(function(){
$('.my-content').filter(':contains("Top")').find('img').attr("src", "http://www.samplestuff.com/kids/test.png");
});
Could someone kindly point me in the right direction of what I need to change to make the script target only images in the div that contain the text instead of all div with that class because one of the div did contain that text (I think that's what triggers it; I may be off about that too).

Try this:
$(document).ready(function(){
$('.my-content:contains("Top")').find('img').attr("src", "http://www.samplestuff.com/kids/test.png");
});
See jQuery :contains docs
Edit
Actually I think your answer should work as well. Seems to work fine in this jsfiddle, can you post your markup?
$('div').filter(':contains("Top")').css("color", "red")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Top</div>
<div>Right</div>
<div>Bottom</div>
<div>Left</div>

Add div to table column

Is it possible to add a div-element to a table cell/td by using jquery?
In my HTML code I have have div called s (just for testing):
<div id="s">12</div>
In my $(document).ready(function(){ function I I have added the following $("#sale_graph1").html('<div id="s"></div>'); where sale_graph1 is the id of the <td>/cell i want to add the <div>-element to. The cell gets populated with text if I write $("#sale_graph1").text
so I know it is the right cell I'm operating on. But when trying to add the div content nothing shows up in the cell.
Thanks for any help!

This working just fine. See here: http://jsfiddle.net/va5gr/
$('#sale_graph1').html("<div id='s'>12</div>");
(I've added the css to make it more visible)
If however you want to use the contents of your existing div#s then you can do this:
$('#sale_graph1').html($('div#s').html());

Try this code:
$("#sale_graph1").append($('#s'));
and ensure that you have only one element called sale_graph1

After this line:
$("#sale_graph1").html('');
You can add stuff inside your div doing this:
$("#sale_graph1 #s").text('12'); //to add text
or
$("#sale_graph1 #s").html('12'); //to add text with html content

Is this what you want:
$("#sale_graph1").html($('#s').html());

It seems the code is right? But I think maybe some errors at some place.
You can check it like as follow:
1. check if you got the right dom
console.log($('#sale_graph1').length);
insure that you can get '1' in the debugger tool's console
if you pass first step, then you can do
$("#sale_graph1").html('<div id="s">some text</div>');
to make sure you add some text in div#s
then if it dosen't work, you can say the four words;

How can I select a block of text on a page, then move an element in front of it?

I have a div that will appear on the page at a separate point. It doesn't always appear on the page and can be added via a CMS if needed. There's a line of text that will appear within the body. If the user has decided to have this div added, it would need to be moved into position via jquery. So, I have this text:
<p><strong>Key Facts:</strong></p>
I want to find it using jquery, then move the other div in front of it. I tried a couple of different ways to select this text then move the div in front of it and haven't had any luck. The best way I found to find the text was to do this:
var foundin = $('*:contains("<p><strong>Key Facts:</strong></p>")');
From that point, to move the div into position, I thought I could something like this:
$('#DivIWantToMove').insertBefore($foundin);
That didn't work, though. I also looked at this:
$( $foundin ).before( $('#DivIWantToMove') );
AS you might imagine, since you're reading this, that didn't work either. So, I'm asking you, is it possible to do what I want? I'm fairly constrained by the CMS that we are using. The DIV I need to move will always be someplace on the page and I have to move it. The client doesn't want to have to add a class to <p><strong>Key Facts:</strong></p> so I'm let with this. If I could have a class on <p> then it would be super easy. I've already done it. The client doesn't like having an extra step. Any ideas?

I think contains selector only looks for text, not html tags. so you have to modify your contains selector. if your html is like this -
<div>
<p><strong>Key Facts:</strong>
</p>
</div>
<div id="move">something something</div>
and you want to move your <div id='move'> in front of p, then try this -
var foundin = $('p:contains("Key Facts")');
var divtomove = $('div#move');
foundin.before(divtomove);
Demo
Update also look into this QA: jQuery :contains with html. Instead of using contains you can use one of the methods from there.

Removing appended html using jQuery?

Using jquery, I currently append html to a div on a click event. The following code allows me to fade in only the appended portion of the div:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow');
This portion works perfectly. But how can I later remove (fade out) only the appended portion? I tried hacking this by storing the html prior to the appending, and then simply hiding everything and showing the stored html. But this does not work well when the same procedure is reused for several divs on the same page (and this seems like poor implementation). Is there a good way to do this?
Just to give an idea of why I need this: Think of a blog type page where for every article on the page there are several comments with only x amount showing by default: the click event fetches the remaining comments and displays them, and then toggling the button again removes the appended comments and sends it back to the original state.

empty() is always an option
jQuery('#main').empty();

Give a look at the empty() function.
It might better solve the problem. Here's the link http://api.jquery.com/empty/

I'd just set and clear the html with '.html()' ...
-- edit
to be more clear, have an area layed out specifically for the addition of these comments:
<div id='commentarea1'></div>
etc.

Try:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow').addClass('appended');
then later
$('#id .appended').fadeOut('slow'); // or whatever you want to do.

It is not that clear from the question but say you show 5 comments by default and then show x more comments. To get back to the original 5 comment default state you can remove all comments with an index greater than 4 (zero based).
The following assumes each comment goes inside its own div that has a class comment.
$('#id>div.comment:gt(4)').remove();