Combine after() and slideDown() - javascript

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();
});

Related

Is there a general way to specify elements in jquery

Is there a general way to specify elements in jQuery. For example using the $(this).find or next function.
I am trying to create a button that when copied will only activate one at a time.
At the moment when the button is duplicated output is copied.
See example.
http://jsfiddle.net/X8AYd/12/
button
<p class="vote-number">+ 70,101</p> button
<p class="vote-number">+ 70,101</p> button
<p class="vote-number">+ 70,101</p>
$(".vote-number").hide();
$(".vote-btn").click(function () {
$(".vote-number").finish().show().fadeOut(5000);
});
$(".vote-number").finish() will target all the elements with the class vote-number. Instead, you want to target only the element next to the button. So, use $(this).next(".vote-number") to target specifically.
JSFIDDLE DEMO
$(".vote-btn").click(function(){
$(this).next(".vote-number").finish().show().fadeOut(5000);
});
You can do with .next() as using .vote-btn will only target the first occurrance of the same, so better use $(this).next(".vote-number') which targets to the next <p> with class vote-number
$(".vote-btn").click(function(){
$(this).next(".vote-number").finish().show().fadeOut(5000);
});
Fiddle Example
Try This:
$(".vote-btn").click(function(){
$(this).next('.vote-number').finish().show().fadeOut(5000);
});
Working Fiddle
$(".vote-number").hide();
$(document).on("click", ".vote-btn", function (e) {
$(this).prev(".vote-number").show().fadeOut(5000);
});
Working Fiddle

Add class via jQuery

I have a #myDiv And i want, when page load, ad class to #myDiv
E.G. Page load, #myDiv.class
I use this code but it's not working:
$('#sky').addClass(‘animate-in’);
$(document).ready(function(){ is called whn the doucument is ready.
and your addClass .. use single or double quotes to enclose the class ( not ‘ )..
try this...
$(document).ready(function(){
$('#sky').addClass('animate-in');
});
UPDATED
another div
<div id="anotherdiv"></div>
call the click function and the jquery selector to which u want to change the class
$('#anotherdiv').click(function(){
$('#sky').addClass('animate-in'); //or any other new class
});
go thorugh the selector jquery documentation..
http://api.jquery.com/category/selectors/
You need to use single or double quote to enclose your class.
Change
$('#sky').addClass(‘animate-in’);
To
$('#sky').addClass('animate-in');
or
$('#sky').addClass("animate-in");
you can do it like this
$(function () {
$('#sky').addClass('animate-in');
});
OR
$(function () {
$('#sky').addClass("animate-in");
});
use this code
<body onload='$("sky").addClass("animate-in")' >
Please check that already any classes are available in $("#sky") and if u want to use only 'animate-in',
Can try this,
$("#sky").attr('class','');
$("#sky").addClass('animate-in');
so that we can come to know that, already existing things are cleared and adding a new one

jQuery, Add elements to the set of matched element using string and variable

I have a click event and I want to add a class to the current element clicked plus an other element and I want to do that in one line.
I have tried something like
JS file
$('div').click(function(){
$(this, 'span').css('background','yellow');
// could usethe following way but it's not DRY
// $(this).css('background','yellow');
// $('span').css('background','yellow');
})​;
HTML file
<div>
div
</div>
<span>
span
</span>​
Here is a fiddle for exemple
But it doesn't works so how can I do without repeating the css method.
You can use .add(selector) method like so:
$(this).add('span').css('background','yellow');
You can add the <span> elements to the $(this) jQuery instance:
$(this).add( $('span') ).css('background', 'yellow');
or even:
$(this).add('span').css('background', 'yellow');
http://jsfiddle.net/Hhqc8/7/
Try siblings():
$('div').click(function(){
$(this).siblings('span').css('background','yellow');
})​
Example:
http://jsfiddle.net/Hhqc8/6/

Moving a div into another div

i have 2 main div:
<div id="div1">
<div id="minidiv1">a</div>
<div id="minidiv2">b</div>
</div>
<div id="div2"></div>
I want move the minidiv1 into the div2 with jquery
how can i do?
You can simply append it to the div2, and it will change its location in the DOM:
$('#minidiv1').appendTo('#div2');
// or
$('#div2').append('#minidiv1');
The difference of the above two lines is what is returned, appendTo returns the #minidiv element, append will return the #div2 element.
Use the one you find most useful if you want to make more actions (by chaining).
$('#minidiv1').appendTo('#div2');
or
$('#div2').append($('#minidiv1'));
$("#minidiv1").appendTo("#div2")
Luca, did Paul's answer actually work for you? I think you need to be referencing the jQuery object like so:
$($('#minidiv1')).appendTo('#div2');
// or
$('#div2').append($('#minidiv1'));
Otherwise, jQuery will just append the string "#minidiv1" to #div2, rather than moving your existing div.

How to clear all <div>s’ contents inside a parent <div>?

I have a div <div id="masterdiv"> which has several child <div>s.
Example:
<div id="masterdiv">
<div id="childdiv1" />
<div id="childdiv2" />
<div id="childdiv3" />
</div>
How to clear the contents of all child <div>s inside the master <div> using jQuery?
jQuery's empty() function does just that:
$('#masterdiv').empty();
clears the master div.
$('#masterdiv div').empty();
clears all the child divs, but leaves the master intact.
jQuery('#masterdiv div').html('');
Use jQuery's CSS selector syntax to select all div elements inside the element with id masterdiv. Then call empty() to clear the contents.
$('#masterdiv div').empty();
Using text('') or html('') will cause some string parsing to take place, which generally is a bad idea when working with the DOM. Try and use DOM manipulation methods that do not involve string representations of DOM objects wherever possible.
I know this is a jQuery related question, but I believe someone might get here expecting a pure Javascript solution. So, if you were trying to do this using js, you could use the innerHTML property and set it to an empty string.
document.getElementById('masterdiv').innerHTML = '';
jQuery recommend you use ".empty()",".remove()",".detach()"
if you needed delete all element in element, use this code :
$('#target_id').empty();
if you needed delete all element, Use this code:
$('#target_id').remove();
i and jQuery group not recommend for use SET FUNCTION like .html() .attr() .text() , what is that? it's IF YOU WANT TO SET ANYTHING YOU NEED
ref :https://learn.jquery.com/using-jquery-core/manipulating-elements/
If all the divs inside that masterdiv needs to be cleared, it this.
$('#masterdiv div').html('');
else, you need to iterate on all the div children of #masterdiv, and check if the id starts with childdiv.
$('#masterdiv div').each(
function(element){
if(element.attr('id').substr(0, 8) == "childdiv")
{
element.html('');
}
}
);
The better way is :
$( ".masterdiv" ).empty();
$("#masterdiv div").text("");
$("#masterdiv > *").text("")
or
$("#masterdiv").children().text("")
$('#div_id').empty();
or
$('.div_class').empty();
Works Fine to remove contents inside a div
You can use .empty() function to clear all the child elements
$(document).ready(function () {
$("#button").click(function () {
//only the content inside of the element will be deleted
$("#masterdiv").empty();
});
});
To see the comparison between jquery .empty(), .hide(), .remove() and .detach() follow here http://www.voidtricks.com/jquery-empty-hide-remove-detach/
When you are appending data into div by id using any service or database, first try it empty, like this:
var json = jsonParse(data.d);
$('#divname').empty();
$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});
or
$("#masterdiv").find("div[id^='childdiv']").each(function(el){$(el).empty();});
try them if it help.
$('.div_parent .div_child').empty();
$('#div_parent #div_child').empty();

Categories