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?
Related
I want to replace the content in the current element with and html string taken out of an object.
It has to work dynamically regardless of what div, p...etc it is in.
<div id="content">
<h5><script>$(this).append(en.login_terms_and_conditions);</script></h5>
</div>
It's possible to do what you've shown, but it's probably not a good idea. You'd use $(document.body.lastElementChild):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// Presumably you have something defining that `en` variable and the object it refers to:
var en = {
login_terms_and_conditions: "terms and conditions here"
};
</script>
<p>one</p>
<p>two</p>
<p>three</p>
<div id="content">
<script>$(document.body.lastElementChild).html(en.login_terms_and_conditions);</script>
</div>
<p>four</p>
<p>five</p>
<p>six</p>
...or of course, just $("#content") if that id is always on the element.
This works because the element is added to the DOM as of when your script runs (the details on that are complicated, but covered in the spec), even though the element's end tag has not yet been parsed.
I wouldn't do that, though, for a couple of reasons, not least that if you're doing this with jQuery, you have to load jQuery prior to that element, which holds up the rendering of your page. You could fix that by not using jQuery for this bit:
<script>
// Presumably you have something defining that `en` variable and the object it refers to:
var en = {
login_terms_and_conditions: "terms and conditions here"
};
</script>
<p>one</p>
<p>two</p>
<p>three</p>
<div id="content">
<script>document.body.lastElementChild.innerHTML = en.login_terms_and_conditions;</script>
</div>
<p>four</p>
<p>five</p>
<p>six</p>
...but it still seems like there are simpler solutions, like just document.write-ing the content, or using server-side templating.
Your example is not quite how jQuery works. The location of the script is irrelevant to the scope of this when attempting to affect an element.
Instead you need to select the #content element directly, then call html() with the value of the login_terms_and_conditions property. Try this:
var en = {
login_terms_and_conditions: '<h2>fizz buzz</h2>'
}
$(function() {
$('#content').html(en.login_terms_and_conditions);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<h5>foo bar</h5>
</div>
First, this does not work as you want. You have to select an element first and then refer to it with this.
Second, even if you would want to add an object key directly into html, that's not possible. ( is possible in JSX but that's another thing :) ).
Third, to make it more dynamic (as I understood you want), you can add some specific data-attributes to your html elements. For example a data-obj='content' for the content and so on. Then, you can iterate your en object and add en[key] value to it's respective html element with the data-obj.
See below
const en = {
title: 'Title in english',
content: 'Some content in english here <br/>Some content in english here ',
link: 'Link text'
}
for (let key in en) {
if( en.hasOwnProperty(key) ) {
let element = $(`[data-obj='${key}']`)
element.html(en[key])
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<h5 data-obj="title"></h5>
<p data-obj="content"></p>
<a data-obj="link"></a>
</div>
If you want to target by id, then you could try something like this:
$("#content").html(en.login_terms_and_conditions);
I have a couple of <div> like this:
<div>
<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
</div>
How can I create dynamically another div to cover div#1 and div#2 in JS or jQuery ?
<div id='event'>EVENT</div>
Thanks.
You can use wrapAll function provided by jQuery like
$("#1, #2").wrapAll( "<div class='new' id='event'>EVENT</div>");
.new{
color : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<div id='1'>1..</div>
<div id='2'>2..</div>
<div id='3'>3..</div>
</div>
The .wrapAll() function can take any string or object that could be passed to the $() function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around all of the elements in the set of matched elements, as a single group.
Here for more details
I found this on Mozilla's doc page, describing the outerHTML attribute.
https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML
After you get the parts of the code you want to wrap, reassign it with a <div> on the front side of 1 and a </div> on the back side of 2.
d1 = document.getElementById('1');
d2 = document.getElementById('2');
d1.outerHTML = '<div>' + d1.outerHTML;
d2.outerHTML = d2.outerHTML + '</div>';
I have an ArrayList named conversations_client, I want to be able to get the value of conversation[6] for each div.
Each one the the media div represent a conversation.
Here is a part of my code :
<c:forEach var="conversation" items="${conversations_client}" >
<div class="media">
<div class="media-left">
<input class="checkbox" type="checkbox" name="selected-conv">
</div>
<div class="media-body">
<h4 class="media-heading">${conversation[0]}</h4>
<span class="hidden">${conversation[6]}</span>
......
I had first tried to use this code :
<script type="text/javascript">
$('.media').click(function(){
var text = $(this).text();
alert(text);
});
</script>
But it would print not only conversation[6] but others as well since they're all inside the div with class media.
Then I tried this :
<script type="text/javascript">
$('.media').click(function(){
var text = $('.hidden').text();
alert(text);
});
</script>
But it would print the same id for all divs, which is the id of the first one.
How can I do that? and would it be better to wrap those media divs with tags to be able to use a specific action for each one of them? because I am displaying all conversations, then once the user will click on one them I'll have to recover its id to be able to display the messages of that specific conversation and it isn't advisable to write Java code inside of jsp.
Thank you :)
Use find from current element.
$('.media').click(function()
{
var text = $(this).find('#hidden').text();
alert(text);
});
UPDATE:
You are using loop to repeat the markup. It's not good to use ID hidden multiple times as per W3C standards. ID should be unique and should be used once in the page.
Use class instead of id for multiple usages. In this case class="hidden"
Better change <span id="hidden">${conversation[6]}</span> to <span class="hidden">${conversation[6]}</span>
Also change JS to find .hidden
$('.media').click(function()
{
var text = $(this).find('.hidden').text();
alert(text);
});
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
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.