How can I replace a DOM node and wrap it after? - javascript

I have a div which I'm replacing with a textarea like:
var $targetDiv = $('#the-div');
var $newDiv = $('#the-new-div');
$targetDiv.replaceWith($newDiv);
Which would turn:
<div id="the-div"></div>
into:
<div id="the-new-div"></div>
How would I wrap <div id="the-new-div"></div> in a div called <div id="the-new-div-wrapper">?
So the outcome would become:
<div id="the-new-div-wrapper">
<div id="the-new-div">
</div>
</div>
$targetDiv.replaceWith($newDiv).wrap('<div id="the-new-div-wrapper"' />')
doesn't seem to work.

Do the wrapping first
$targetDiv.wrap('<div id="the-new-div-wrapper" />').replaceWith($newDiv);
Or make it in two lines:
$targetDiv.replaceWith($newDiv);
$newDiv.wrap('<div id="the-new-div-wrapper" />');
Fiddle
There's also a typo in your code: $targetDiv.replaceWith($newDiv).wrap('<div id="the-new-div-wrapper"' />') There is an additional apostrophe, which shouldn't be there.

try this
$targetDiv.replaceWith($newDiv.wrap('<div id="the-new-div-wrapper"' />'));
it would actually wrap the div before the lot replace the target div but will achieve the same result.
See here
http://jsfiddle.net/WgW6Y/

Related

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

Why does jQuery return null for element height?

I faced the same problem as that is mentioned by Matt but it is little different. I am trying to get height of a div but every time I get null.
HTML:
<div id="main" class="box-main " style="display:block">
<div class="box_content" style="position:absolute;top:0px;bottom:0px;height:453px;width:100%;padding-left:5px;padding-bottom:2px;">
<div style="min-width:200px;min-height:41px;padding-top:8px" id="ass-1415241823647 item-97"><div class="box">
<div class="new-try item_message" title="ram"><div class="pp"><img src="images/try.jpg" class="avatar " width="40" height="40"></div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
</div>
JavaScript:
$(document).ready(function(){
alert($("#ass-1415241823647 .item_message").height());
});
I tried this too but it didn't work.
$(document).ready(function(){
alert($("#main .box_content #ass-1415241823647 .box .item_message").height());
});
ass-1415241823647 item-97 you can't have two id's remove one or try using class if u really want to
You don't seem to have any elements in your markup matching the selector #ass-1415241823647 .item_message" so it's unable to locate it.
Isn't the result of $("#ass-1415241823647 .item_message") empty jQueryObject? length 0?
.. id="ass-1415241823647 item-97">..
value of id attributes was wrong.
Try this using jquery:
$(document).ready(function(){
alert($(".item_message").css("height"));
});
Hope this helps.

Jquery: parse div blocks and add id(1,2,3,4,5)

I'm trying to make jquery parse list of div blocks and add id to each div one by one with numbers like 1,2,3,4,5 and so.
For example, here is the list of div blocks:
<div class="my-blocks">
<div class="start"></div>
<div class="start"></div>
<div class="start"></div>
<div class="start"></div>
</div>
There can be any amount of div blocks with class "start". Final result must be like this:
<div class="my-blocks">
<div id="1" class="start"></div>
<div id="2" class="start"></div>
<div id="3" class="start"></div>
<div id="4" class="start"></div>
</div>
How can I do that? I just don't really understand where I can start to reach this functionality.
You can use .each() to iterate over child divs and then use index+1 to set it as id value.try this:
$('.my-blocks div').each(function(){
$(this).attr('id',$(this).index()+1);
});
Working Demo
You can do:
$('.my-blocks .start').each(function(i) {
$(this).attr('id', i+1);
});
Also note that number is not valid id, you can use div-1, div-2... instead.
Fiddle Demo
You need to add an alphabetical prefix for the ids, Since setting an id as a numeric value is not acceptable in standards below html5. so that your code would achieve backward compatibility.
Try to use the receiver function of .attr(),
$('.my-blocks .start').attr('id', function(i,_) {
return 'id-' + (i+1);
});
DEMO
You must take care that id starting with number is not allowed until html 4. So if you not working on html5 then you should add some prefix to id.
try each():
$('div.start').each(function(index, element){
$(this).attr('id',index+1);
});
Here is working demo.
Using jQuery 'id' property, loop through each block:
$(function(){
$.each($('.start'), function(i,e){
e.id = i+1;
});
});
JSFiddle here http://jsfiddle.net/PU2T4/
And one more (DEMO):
$('.start').attr('id', function() { return $(this).index()+1; });

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

How to append text after last css class

I have the following html
<div class="someClass">
Some text
</div>
<div class="someClass">
Some other text
</div>
<div class="add>
<img src="someImage.jpg">
</div>
Now I'd like to append another div after a click on the add image - but only after the last div with the class "someClass".
If I use the following jQuery it will be appended after each someClass element, so multiple times.
$(".add img").live("click", function() {
$(".containerFooter").after("<div class='someClass'>test</div>");
});
Is there a way to only append it after the last div with the someClass attribute?
You are looking for the :last selector:
$(".someClass:last").after("<div class='someClass'>test</div>");
$('.someClass').last()
OR
$('.someClass:last')
will give you last element of class someclass
Use:
$(".someClass").last().append("<div class='someClass'>test</div>");
$(".add img").live("click", function() {
$(".someClass:last").after("<div class='someClass'>test</div>");
});
Sorry, dint read the question completely in first attempt, updated the ans!
Also your html has a typo , its make it
working demo
$(".someClass").last() //-> selects your last div with id = someClass
.after("<div class='someClass'>test</div>");//-> place the html after the selected div
Actual code below
$(".add").live("click", function(){
$(".someClass").last().after("<div class='someClass'>test</div>");
});
​
​
There may be an easier way, but a jquery class returns an array of applicable objects. So you can find the last such object, create a new jquery object from it, and then operate on that.
<html><title>JQuery Play</title>
<h1>JQuery Play</h1>
<script src="jquery-1.4.1.js" type="text/javascript" ></script>
<script type="text/javascript">
function add()
{
var x=$(".someClass");
$(x[x.length-1]).after("Added text");
}
</script>
<div class="someClass">
Some text
</div>
<div class="someClass">
Some other text
</div>
<div class="add">
<button onclick="add()">Add</button>
</div>
</html>

Categories

Resources