Develop Reference

How to add div dynamically inside a div by class - Jquery

I want dynamically add info div into every dynamic class.
HTML
<div id='container'>
<div class='dynamic'></div>
<div class='dynamic'></div>
<div class='dynamic'></div>
<div class='dynamic'></div>
</div>
I want like this.
<div id='container'>
<div class='dynamic'><div class="info">info</div></div>
<div class='dynamic'><div class="info">info</div></div>
<div class='dynamic'><div class="info">info</div></div>
<div class='dynamic'><div class="info">info</div></div>
</div>
JS FIDDLE

You can use $.wrapInner method
$(".dynamic").wrapInner('<div class="info">info</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="dynamic"></div>
<div class="dynamic"></div>
<div class="dynamic"></div>
<div class="dynamic"></div>
</div>

To add an info div into every class using jQuery, simply use:
$( ".dynamic" ).append( "<div class='info'>info</div>" );
The JSFiddle demonstrates it.
If you want to continually check for .dynamic classes, you can use something like this:
$(document).ready(setInterval(function(){
$( ".dynamic" ).append( "<div class='info'>info</div>" );
}, 1000));
In the above case, you are checking for .dynamic classes every 1000ms (1 second).
Hope this helps.

Try using append():
$('.dynamic').append($('<div/>', { class: 'info' }).html('info'));
Update your fiddle:
http://jsfiddle.net/4cncLor7/2/
If your .dynamic div already contains content and you want to at the .info div at the beginning use prepend():
$('.dynamic').prepend($('<div/>', { class: 'info' }).html('info'));

I have updated it. Please check and give me feedback.
http://jsfiddle.net/4cncLor7/4/
jQuery('.dynamic').html('<div class="info">info</div>');

You could do something like this:
$('.dynamic').each(function() {
var newDiv = $('div');
newDiv.addClass('info');
newDiv.html('info');
//inject the new div
$(this).append(newDiv);
});

check this code : Example
Javascript:
var vof=$("#box1").val();
//$(".result-box").text(vof);
var e = $('<div class="result-box">'+vof+'</div>');
$('#box').append(e);
HTML :
<div id="box">
<!--<div class="result-box" id="rbx"></div>-->
</div>
here i am creating dynamic div so that every time button is clicked it create new div and you can add attribute id to them separately

Having issue with DOM selection in jquery

<div class="wrapper">
<p class="text"></p>
</div>
<div class="wrapper">
<p class="text"></p>
<img></img>
</div>
<div class="wrapper">
<p class="text"></p>
<div class="vid"></div>
</div>
Assume above is a list of users' post, and I want to identify type of post of them. To select the image or video type is easy, for example the video, just select like $('.wrapper .vid').
But there is a problem when I want to select plaintext type of post, because the class text also appear in vid and image type of post.

Looks like you want wrapper elements which does not hae vid or img then
$('.wrapper').not(':has(img, .vid)')
If you want the text elements within them
$('.wrapper').not(':has(img, .vid)').find('.text')

You can use filter to get the three different types of posts. Something like this:
var $textPosts = $('.wrapper').filter(function() {
return $(this).find('img, .vid').length == 0;
});
var $imgPosts = $('.wrapper').filter(function() {
return $(this).find('img').length > 0;
});
var $vidPosts = $('.wrapper').filter(function() {
return $(this).find('.vid').length > 0;
});
Also note that the img HTML tag is self closing, eg:
<img src="foo.jpg" title="Foo" />

If i get this right that you want to get all the test in <p> with the class text, then you can do something like this
$('.wrapper > .text').html()
The above code will give you the content of only those element with class "text" that are direct under class "wrapper"

You can use .filter() to filter out the element with class text whose has no sibling:
var text = $('.text').filter(function() {
return $(this).siblings('*').length == 0
}).text();
Fiddle Demo

You can use
$('.wrapper p.text').text()
fiddle demo

Add click events to php generated elements

I'm making a page that will generate a table of divs. Each row has a cell with a link. When that link is clicked a hidden div between the current row and the next will toggleSlide out.
The link will have id="clickLink_10" and the hidden div will have id="10" and class="hiddenDiv". The number 10 is a dynamic number generated form the id of the post in the database.
I have the animation working fine, as long as I hard code the numbers. But I want to connect the link to it's hidden div dynamically, since the rows will be fetched from a database.
Here's an example of how the html may look (it's more complicated in reality, but this is the key part):
<div>CLICK HERE</div>
<div class="hiddenDiv" id="11">blabla</div>
<div>CLICK HERE</div>
<div class="hiddenDiv" id="1">blabla</div>
<div>CLICK HERE</div>
<div class="hiddenDiv" id="3">blabla</div>
And here's what I'm trying to do in jQuery:
hiddenDivs = $('.hiddenDiv');
for(var i = 0; i < hiddenDivs.length; i++ ) {
$("#clickLink_" + hiddenDivs[i].id).click( function() {
$(hiddenDivs[i]).slideToggle(1000);
});
}
Which won't work obviously.I know I'm treating the i-variable wrong so view this a s dummy code. Very grateful for any help.

A valid option could be using data- attributes. I'll also change your numeric ids as only numbers is not a valid html id.
HTML
<div>CLICK HERE</div>
<div class="hiddenDiv" id="hidden_11">
<div>CLICK HERE</div>
<div class="hiddenDiv" id="hidden_1">
<div>CLICK HERE</div>
<div class="hiddenDiv" id="hidden_3">
JS
$(".clickLink").click( function() {
var hiddenDivId = "hidden_" + $(this).data("hidden-id");
$("#" + hiddenDivId ).slideToggle(1000);
});

You can use the ^= operator with an attribute selector to select elements. the ^= operator tells it to look for the attribute that "starts with" something, so:
$("a[id^=comment_]").click(function(e){
e.preventDefault();
var hideId = $(this).attr("id").replace("comment_","");
$("#"+hideId).slideToggle(1000);
});
So the selector a[id^=comment_] is basically saying select all anchor tags that have an id that start with comment_

Duplicate DIV with input field

Basically I've managed to become stuck yet again trying to duplicate a DIV and it's form elements using jQuery.
Button:
<div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div>
Div and contents I wish to duplicate
<div class="row" id="skiller">
<div class="label">Skill</div>
<div class="input"><input class="lineput" placeholder="Doing stuff."></div>
</div>
I've tried using the clone method, I just can't seem to create a functioning line of code that will duplicate it beneath the first div, and make it ready for PHP multiple data entry.
Thanks!

Something like this would be a start:
$("#addSkill").click(function(e){
e.preventDefault();
var new_skiller = $("#skiller").clone();
new_skiller.attr("id", "skiller-"+$(".row").length);
new_skiller.insertAfter(".row:last");
});

You need to clone and then append() the item inside a div like so:
HTML
<div class="thing">
<div class="row" id="skiller">
<div class="label">Skill</div>
<div class="input"><input class="lineput" placeholder="Doing stuff."></div>
</div>
</div>
<div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div>
jQuery
$(document).ready(function(){
$('#addSkill').click(function(){
var thing = $('#skiller').clone();
$('.thing').append(thing);
});
});
View the jsFiddle Demo....
Note: you'll need to give them seperate names/make it an array to access

Try this. should work. Note: ID can not be duplicated. the following code will duplicate div with id as well.
$(document).ready(function(){
$('#addSkill').click(function(e) {
var skiller = $('#skiller').clone();
$( "#skiller" ).after( skiller );
});
});
Demo:
http://jsfiddle.net/XpN95/

JQuery : Remove class, not child content

I use jQuery to append the content into each contentx class like.
<div id="sidebar">
<div class="contentx"></div>
<div class="contentx"></div>
</div>
<script>
$("#sidebar .contentx").each(function()
{
//Append here
}
</script>
After Append I have, for example :
<div id="sidebar">
<div class="contentx">
something 1 is inserted here.
</div>
<div class="contentx">
something 2 is inserted here.
</div>
</div>
but I want to remove class="contentx" whenever the content is appended. This mean I have only :
<div id="sidebar">
something 1 is inserted here.
something 2 is inserted here.
</div>
How

Option 1
If you just want to remove the class "contentX" from the div after the content has been added, you can try the following:
$('#sidebar .contextX').each(function () {
// Append here.
}).removeClass('contextX');
EDIT: Seems I misread the question a little (based on your indicated desired output).
Option 2
If you want to remove the entire element and replace it with the content of your choice? For that, you can try:
$('#sidebar .contextX').each(function () {
$(this).replaceWith('<new content here.>');
});
jQuery replaceWith

Besides the append, call removeClass
$("#sidebar .contentx").each(function()
{
//Append here
$(this).removeClass('contentx');
}

Try this
var tmp = $(".contentx").html();
$('.contentx').append(tmp);
var tmp2 = $(".contentx").html();
$('.contentx').remove();
$('#sidebar').append(tmp2);