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

jQuery check divs has a class and unwrap if no other class

I have two div's and what I am trying to do is loop through all the divs to check if the div has a class jsn-bootstrap3, I'm also trying to check to see if the div has any other classes, if it doesn't then I'd like to remove the jsn-bootstrap3 div so that the child content is whats left.
<div class="jsn-bootstrap3">
<div class="wrapper">
Div one
</div>
</div>
<div class="jsn-bootstrap3 block">
<div class="wrapper">
Div two
</div>
</div>
$('div').each(function() {
if ($(this).hasClass()) {
console.log($(this));
var class_name = $(this).attr('jsn-bootstrap3');
console.log(class_name);
}
});
jsFiddle

You can try something like
$('div.jsn-bootstrap3').removeClass('jsn-bootstrap3').filter(function () {
return $.trim(this.className.replace('jsn-bootstrap3', '')) == ''
}).contents().unwrap();
Demo: Fiddle
use the class selector to find div's with class jsn-bootstrap3 because we are not goint to do anything with others
use filter() to filter out div's with any other class
use unwrap() with contents() to remove the wrapping div

jQuery: unwrap() deletes additional parent container

I have the container .vorteile wrapped in .vorteile_outer by jQuery. When I want to remove .vorteile_outer using .unwrap() on .vorteile, the parent container of .vorteile_outer which is #template_footer_vorteile also gets removed.
Here is the jquery part (in full context it is in a function).
$('.vorteil, :vorteil_outer:not').unwrap();
And here the HTML part
<div id="template_footer_vorteile">
<div class="vorteil_outer">
<div class="vorteil kunden">
<p class="titel">kundenzufriedenheit</p>
<p class="desc">kundenzufriedenheitText</p>
</div>
</div>
<div class="vorteil_outer">
<div class="vorteil tradition">
<p class="titel">tradition</p>
<p class="desc">traditionText</p>
</div>
<div class="clear"></div>
</div>

Just give like this
$("p").unwrap(); // vorteil class div removed
$('.vorteil').unwrap(); // vorteil_outer div removed
DEMO

If you want to remove 'template_footer_vorteile' then try this :
$('.vorteil').parent().unwrap();
and if you want to remove only "vorteil_outer" and retain the "template_footer_vorteile" then try this :
$('.vorteil').unwrap();

To remove the .vorteile_outer you always have to apply unwrap to vorteil (ie) when you want to remove the div apply unwrap to the child of that div.
var gs = $("div.vorteil");
$("button").click(function () {
if (gs.parent().is("div.vorteil_outer")) {
gs.unwrap();
}
});
here is fiddle
To know about unwrap visit http://api.jquery.com/unwrap/

targeting a div in an ocean of nested dynamically added divs

I'm using the liferay framework and I need to add a JavaScript detected inline height to a very very specific div in my page. The problem is I need to target it going through an unknown number of dynamically added divs with dynamically added classes and IDs. To complicate this even further, the divs are randomly siblings or nested in each other.
Here's what it looks like:
<div class="known-class">
<div class="unknown dynamicallygenerated"></div>
<div class="unknown dynamicallygenerated">
<div class="unknown dynamicallygenerated">
<div class="unknown dynamicallygenerated"></div>
<div class="unknown dynamicallygenerated">
<div class="DIV-I-WANT-TO-TARGET">this is the div i need to Target with my css/javascript</div>
</div>
</div>
</div>
obviously I can't target it simply with
function resize() {
var heights = window.innerHeight;
jQuery('.DIV-I-WANT-TO-TARGET').css('height', heights + "px");
}
resize();
Because that class is present elsewhere, I would rather target it with something like.
jQuery('.known-class .DIV-I-WANT-TO-TARGET')
Which obviously doesn't work because there's a ton of other divs in the middle and my div is not a child of ".known-class"
I was asking myself if there was any jQuery that could help. Something like:
Catch any div with .DIV-I-WANT-TO-TARGET class that is "generically" inside another div that has .known-class
Is this possible? thanks a lot for your help!

Something like this would work:
// this will target the known-class and find all children with DIV-I-WANT-TO-TARGET
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET');
// this will target the known-class and find the first DIV-I-WANT-TO-TARGET
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').first();
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:first');
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:eq(0)');
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').eq(0);

You can try in your css file
.known-class div div div div{}
The last div being the DIV-I-WANT-TO-TARGET

Assuming that you are adding the divs starting from the outer to the inner
Assign an equal name plus a number starting from 1
<div class="known-class">
<div class="unknown dynamicallygenerated" id="dynamicdiv1"></div>
<div class="unknown dynamicallygenerated" id="dynamicdiv2">
<div class="unknown dynamicallygenerated" id="dynamicdiv3">
<div class="unknown dynamicallygenerated" id="dynamicdiv4"></div>
<div class="unknown dynamicallygenerated" id="dynamicdiv5">
<div class="DIV-I-WANT-TO-TARGET" id="dynamicdiv6"></div>
</div>
</div>
</div>
The use jQuery [.each][1] to loop through all the divs on the document
$( document.body ).click(function() {
$( "div" ).each(function( i ) {
if ( this.style.color !== "blue" ) {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
When you reach the last item in numeric order. (you can use any split function) add the attributes to that div

you need to select last div inside the known-class:
$('.known-class').find('div:last').css('background', 'Red')
OR if you want to select all the .known-class :
$('.known-class').each(function() {$(this).find('div:last').css('background', 'Red')});

Actually your selector works just fine:
$('.known-class .DIV-I-WANT-TO-TARGET')
With a space, selectors will find any descendant.
The search is only limited to direct descendants (immediate children) if you use the > operator.
So $('.known-class > .DIV-I-WANT-TO-TARGET') would not find what you wanted.