I stumbled over jQuery's wrap() function.
Somehow it behaves different when I'm trying to wrap two div tags which have some text in between them, than without text between the two divs.
jquery:
var wrapper1 = '<div class="wrap1">something in between<div class="innerwrap1">';
$('.content1').wrap(wrapper1);
var wrapper2 = '<div class="wrap2"><div class="innerwrap2">';
$('.content2').wrap(wrapper2);
The resulting HTML is this:
<div class="wrap1">
something in between
<div class="innerwrap1"></div> <!-- wtf? -->
<div class="content1">Lorem</div>
</div>
<div class="wrap2">
<div class="innerwrap2">
<div class="content2">Ipsum</div>
</div>
</div>
Here's a fiddle:
http://jsfiddle.net/RfJN5/
The first result is quite surprising, isn't it? I would think that both closing divs should be placed after .content1, no matter if theres any text between the divs.
Of course I know it's safer to add the closing divs myself to control the behaviour, but is this some kind of bug or just a missunderstanding of how to use jQuery wrap?
Thanks in advance!
that works as expected, your wrapper1 would be the main object that would be wrapped around content1 and as you haven't closed the innerwrapper1, jquery closes it for you. If you want to wrap with inner wrapper then make this an object, wrap content and then append the inner wrapper to wrapper:
var wrapper1 = $('<div class="wrap1">something in between</div>'),
innerWrapper = $('<div class="innerwrap1" />');
$('.content1').wrap(innerWrapper);
wrapper1.append($('.innerwrap1'));
Example
Related
Using jquery, is there a way to capture all the code between two divs?
For example; using the code below, if Show info is clicked than the code between the ws-css-table divs should be retrieved, i.e.
<div class="ws-css-table-tr"><div class="ws-css-table-td">A</div>... <div class="ws-css-table-td">D</div></div>
should be put into a text variable.
Here is a fiddle for the current code.
Thanks for any help.
<div class="ws-css-table">
<div class="ws-css-table-tr">
<div class="ws-css-table-td">A</div>
<div class="ws-css-table-td">B</div>
</div>
<div class="ws-css-table-tr">
<div class="ws-css-table-td">C</div>
<div class="ws-css-table-td">D</div>
</div>
</div>
</br>
<div class='show_div_info'>Show info</div>
jquery
$(".show_div_info").click(function(){
alert ("info?")
});
Here's the classic javascript and a single liner technique using innerHTML:
$(".show_div_info").click(function(){
alert($('.ws-css-table')[0].innerHTML);
});
https://jsfiddle.net/vy5mok8k/3/
$(".show_div_info").click(function(){
var children = $(".ws-css-table").html();
$(".children").html(children);
});
https://jsfiddle.net/vy5mok8k/2/
Do you mean to capture the elements inside the table and do something with it later?
$(".show_div_info").click(function(){
var table = $(".ws-css-table");
// Do something
});
Do you mean to capture the literal code inside the table? Say hello to the html() function:
$(".show_div_info").click(function(){
var table = $(".ws-css-table").html();
// Do something
});
Do you mean to capture the actual text inside the table? Say hello to the text() function:
$(".show_div_info").click(function(){
var table = $(".ws-css-table").text();
// Do something
});
The more practical one would be the first one, since you will be able to use it to manipulate the elements inside as you need.
Second one just grabs the actual code, perhaps you need it to show off your awesome skills.
The last one will print the text, neat if you use it to parse or log what you have thus far done.
How did that help?
Lets say i have a string like this:
<div id="div1"></div>
<div class="aClass" id="div2">
<div id="div3" class="anotherClass"></div>
<div id="div4" />
</div>
<div id="div5"></div>
I want to remove div2 from the string and everything inside that div
So i got a string like this
<div id="div1"></div>
<div id="div5"></div>
I thinking something like using regex to find the first div with the id of "div2" or whatever the id of the div is and count brackets untill it gets to "< /div>". The problem is that the "div3" also got a "< /div>" at the end.
The content of the div i want to remove may contain more or less div's then this too.
Any ideas on how to code this?
Update:
var htmlText = editor3.getValue();
var jHtmlObject = jQuery(htmlText);
jHtmlObject.find("#div2").remove();
var newHtml = jHtmlObject.html();
console.log(newHtml);
Why doesn't this return anything in the console?
Update2!:
I have made a jsFiddle to make my problem visual..
http://jsfiddle.net/WGXHS/
Just put the string into jQuery and use find and then remove.
var htmlString = '<div id="div1"></div>\
<div class="aClass" id="div2">\
<div id="div3" class="anotherClass"></div>\
<div id="div4" />\
</div>\
<div id="div5"></div>';
var jHtmlObject = jQuery(htmlString);
var editor = jQuery("<p>").append(jHtmlObject);
editor.find("#div2").remove();
var newHtml = editor.html();
If you have access to jQuery and your HTML is part of the DOM you can use $.remove()
EG. $('#div2').remove();
If it's not part of the DOM, and you have it in a string, you can do something like:
$('#div2', $(myHTML)).remove();
jQuery .remove() will do
$("#div2").remove();
The regex option would work if you control generating the string so you can ensure things like order of the attributes and indentation. If not your best bet is to use an HTML parser. If you are working inside of a browser jQuery is a good option. If you are working server-side you'll need to find a parser for the language you chose.
I'm new to JQuery + JQuery mobile.
I am attempting to create dynamic div elements for styling purposes. I am pulling in JSON from an AJAX call, tossing it into an unordered list, and wrapping it into a div. The AJAX + JSON works beautifully, but when I go to create the DIV within the script and attach it into another div container, it doesn't work. I've done a lot of reading on this, but none of the solutions I've found seems to work for the div part.
I've simplified my code down to the following:
HTML:
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div id="someDiv" data-role="content"></div>
<div id="anotherDiv"></div>
</div>
JavaScript:
$(document).ready(function() {
var newDiv = '<div id="d1"><p>This will attach to the content</p></div>';
var aDiv = '<div id="test" data-role="page"><p>This never gets displayed because of data-role?</p></div>';
$("#someDiv").html(newDiv).trigger('create');
$("#anotherDiv").html(aDiv).trigger('create');
});
Note how aDiv doesn't attach to anotherDiv. I suspect this has something to do with the data-role="page" attribute in aDiv.
JSFiddle Link
I've been stuck on this for 1+ day. Any help is greatly appreciated!!
In fact your aDiv is being attached, just not displayed (you can examine your markup in Firebug/WebInspector/DragonFly and see this) since only one JQM page at a time is displayed.
If you want to attach a new page you can try adding it to your body
Here's a fork of your fiddle
http://jsfiddle.net/49LgB/
How do I retrieve the content between and including the following <div class="adding"> and store it in a variable?
<div class="adding">
<b>
<div class="column">
<div class="mediumCell">
<input type="text" name="name" placeholder="توضیح" title="نام پکیج تور خارجی">
</div>
</div>
<div class="column" style="margin: 5px 3px;">
<div class="mediumCell">
<div class="adda">
</div>
</div>
</div>
</b>
</div>
var adding = '<div class="adding"><b><div class="column"><div class="mediumCell"><input type="text" name="name" placeholder="توضیح" title="نام پکیج تور خارجی"></div></div><div class="column" style="margin: 5px 3px;"><div class="mediumCell"><div class="adda"></div></div></div></b></div>'
In each click I want to get the content just once.
Unfortunately, after two or more clicks getting content several times together (E.x: after two clicks it stores the content twice).
I tried this:
$(function () {
var i = $('.adding').size();
$('.add_input').live('click', function () {
var scntDiv = '.' + $(this)
.closest('.find_input')
.find('div')
.attr('class');
var input = $(scntDiv).html();
$(this).remove();
$(input).appendTo(scntDiv);
i++;
return false;
});
});
You can use the html() method, as others have said, but there's a catch: that method returns the inner HTML content of the element, so the markup of the outer <div> element won't be included in the result.
Since you seem to want that markup, you can work around the issue with clone(), wrap() and parent():
var adding = $("div.adding").clone().wrap("<div>").parent().html();
You can get the inner HTML using the html function:
var adding = $(".adding").html():
...which will give you the browser's version of the markup within the first matching div (the first div with the class "adding"). It's fairly simple at that point to wrap it with the markup for the div, unless there are a lot of chaotic attributes involved.
However, note that the markup you get back may not be what you expect, because your HTML is invalid. b elements cannot contain div elements (b elements may only contain phrasing content; div elements are flow content), and so the browser adjust things as it sees fit to display something reasonable. This is a Bad Thing(tm), it's much better with dynamic web apps to ensure that your HTML is valid.
Is that what you're asking for ?
var adding;
$('.adding').click(function(){
adding = $(this).html();
alert(adding);
});
var adding = $(".adding").html();
maybe?
Does anyone know how to stop jQuery fromparsing html you insert through before() and after()? Say I have an element:
<div id='contentdiv'>bla content bla</div>
and I want to wrap it in the following way:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
</div>
I use the following jQuery/Javascript
$('#contentDiv').each( function() {
var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
var afterHTML = "<div id='afterDiv'></div></div>";
$(this).before(beforeHTML);
$(this).after(afterHTML);
}
This however will not result in the correct wrapping, it will create:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
</div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
Using wrap() won't work either since that gets jQuery even more mixed up when using:
$(this).wrap("<div id='wrapperDiv'><div id='beforeDiv'></div><div id='afterDiv'></div></div>");
How should I solve this?
Thanks in advance!
$('#contentDiv').each(function() {
$(this).wrap('<div id="wrapperDiv">');
$(this).before('<div id="beforeDiv">');
$(this).after('<div id="afterDiv">');
});
produces:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
</div>
your markup isn't complete...before and after are to take complete nodes only...
what you are trying to do is wrap your content, which is different.
you want this:
.wrap(html);
http://docs.jquery.com/Manipulation/wrap#html
I think you're approaching it wrong. Think about what you actually want to achieve...
You want to WRAP everything with one div. Then insert 1 div before, and 1 div after.
so do .wrap() first, then append before and after-divs relative to the content-div.
if you happen to have the actual HTML as a string (from an XHR or something) then you need to read out the html and concatenate it yourself as Douglas Mayle suggested.
I'm sorry, but this one should be obvious. In your case, you can't use wrap because it sticks the original node into the deepest node it finds in the wrapping HTML. You don't want that. Instead, read out the HTML from your object and combine it with what you have:
$('#contentDiv').each( function() {
var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
var afterHTML = "<div id='afterDiv'></div></div>";
// This line below will do it...
$(this).html(beforeHTML + $(this).html() + afterHTML);
}