I want to wrap a link which is in a div:
This :
<div id="hello">
http://google.fr/646564897564/8977748946
</div>
will be:
<div id="hello">
<div id="wrap">
http://google.fr/646564897564/8977748946
</div>
</div>
have a look here: http://jsfiddle.net/R44pn/
JS
var outer = document.getElementById("hello");
outer.innerHTML = "<div id='wrap'>"+outer.innerHTML+"</div>"
OUTPUT
<div id="hello">
<div id="wrap">
http://google.fr/646564897564/8977748946
</div>
</div>
with JQuery
$("#hello").html("<div id='wrap'>"+$("#hello").html()+"</div>")
fiddle here: http://jsfiddle.net/q27Sw/
hope it helps
Making use of jQuery you can use the wrapInner function:
var outer = $("#hello");
outer.wrapInner('<div id="wrap">);
http://jsfiddle.net/R44pn/6/
Related
i have 2 divisoin
<div id="details">
<div id="feature">
</div>
</div>
I need to put the content using $("#details").html(content); (it is working correctly) like that way i need to put the content inside feature div i am using following way:
$("#details #feature").html(content);
but it is not working..how to solve?
When you use $("#details").html(content); you override the content of the div. So you're inner div with the id feature gets removed. Maybe you use $("#details").prepend(content); or you add another div for the main content and replace that content.
Look here is an example:
https://jsfiddle.net/morrisjdev/s9u7rfcu/
ID is a unique attribute so you can directly use id like below.
$(function() {
var content = "Some text here";
$('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
OR
$(function() {
var content = "Some text here";
$('#details').find('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
$(document).ready(function(){
var htmldetail ="Hello! I am Here";
var details = $("#details").html(htmldetail);
$("#userfeature").html(details);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="details">
<div id="userfeature">
</div>
</div>
The second is #feature and not #userfeature. And also add the jQuery Library as well. You can replace test with content variable.
$("#feature").html("test");
<div id="details">
<div id="feature">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
And also remember Id is unique and hence no need to mention its parent.
Run the following snippet and you can get the output.
Simple way..Go Through this
HTML
<div id="details">
<div id="feature">
</div>
</div>
JQUERY
$(document).ready(function()
{
var content="contain sample data";
// $("#details").html(content); if you wrote like this,
this will replace all content, so the inner div will be replaced
$("#details").append(content); // outer div
$("#feature").html(content);
});
Or you can use css-like selector method:
$(document).ready(function() {
$('#details > #feature').html('Hello <strong>World!!!</strong>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
I have created a plunk for it and it is working.
Try including the action inside
$( document ).ready(function() {
console.log( "ready!" );
var content = 'Hey there';
$("#details #feature").html(content);
});
Plunk :- http://plnkr.co/edit/63GsIoGmprnKs7oe77cF?p=preview
I would like to get the content of an specific div class in Javascript or PHP. I've found some possible solutions but no one worked for me. This is the code of the page:
<div class="um-field um-field-professional_tag um-field-text" data-key="professional_tag">
<div class="um-field-label"><label for="professional_tag-27326">Professional Tag</label>
<div class="um-clear"></div></div>
<div class="um-field-area">
<div class="um-field-value">text_to_be_retrieved</div>
</div></div>
The required content is the one containing "text_to_be_retrieved" but the code shall not be aware of the text "text_to_be_retrieved" (it has to retrieve the text just with the surrounding divs information). Is it possible to store it in a PHP/Javascript variable to be used by another algorithm?
Thanks in advance.
You can do it like this, store those values in object:
var obj = {};
var nick = $('.um-field-label label').attr('for');
var val = $('.um-field-label').next('.um-field-area').find('.um-field-value').text();
obj.nickName = nick;
obj.value = val;
alert(obj.nickName + " " + obj.value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="um-field um-field-nickname um-field-text" data-key="nickname">
<div class="um-field-label">
<label for="nickname-27326">Professional Tag</label>
<div class="um-clear">
</div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
Use :contains selector to find elements that contains specified 'text'
If you have a variable holding the text wrapped in div, you can pass the variable in :contains
Try this:
var myText = 'adolfodominguez'; // Variable holding text value
var element = $('.um-field-value:contains("' + myText + '")')
console.log(element);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="um-field um-field-nickname um-field-text" data-key="nickname">
<div class="um-field-label">
<label for="nickname-27326">Professional Tag</label>
<div class="um-clear">
</div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
Your HTML, I appended an element to show you the output.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="um-field um-field-professional_tag um-field-text" data-key="professional_tag">
<div class="um-field-label">
<label for="professional_tag-27326">Professional Tag</label>
<div class="um-clear"></div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
</div>
<br>Copied text:
<p class='demo'></p>
Using the jQuery framework of Javascript, you will get the result you are looking for:
var text = $("[for='professional_tag-27326']").parent('.um-field-label').next('.um-field-area').children('.um-field-value').text();
$('.demo').text(text);
https://jsfiddle.net/73mtmLLv/5/
I have a container div with two divs inside of it, like such:
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
</div>
I have wrapped another div around 'child1' and 'child2' but it's appearing twice which I haven't been able to fix:
$(".child1, .child2").wrapAll('<div class="style"></div>');
Which is rendering out as the following:
<div class="container">
<div class="style">
<div class="style">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
</div>
But what I actually want is the following:
<div class="container">
<div class="style">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
How do I go about fixing this? I have tried numerous other methods of trying to sort the double-append.
EDIT: The issue was jquery was firing twice, I moved the code out of the existing file and into a new file. Once I did this the answers below all worked.
Try:
$(".container > div").wrapAll('<div class="style"></div>');
Change you markup little bit, (just add common class)
<div class="container">
<div class="child1 child"></div>
<div class="child2 child"></div>
</div>
now use below code:
$( ".child" ).wrapAll( "<div class='style' />");
$(".child1").next().andSelf().wrapAll("<div class='style'/>");
Try it...
I ran this in fiddle and it seems to work fine... ??????
You can do this though...
$(".container").each(function() {
var ch1 = $(this).find('.child1');
var ch2 = $(this).find('.child2');
var st = $('<div class="style">');
st.append(ch1);
st.append(ch2);
$(this).html('').append(st);
});
I have div's:
<div class="message">
<div class="text-message">:D, :( Hello Wolrd!</div>
</div>
I want the result prints this:
<div class="message">
<div class="text-message">
<div class="smile-happy>":D</div>,
<div class="smile-sad">:(</div>
Hello Wolrd!
</div>
</div>
My JavaScript:
var smile1 = ':)';
var replace = smile1.replace(smile1,'<span class="smile-happy" title="Smile">'+smile1+'</span>');
$(".smile-happy:contains(':D')")){
$('.smile-happy').replaceWith(replace);
}
I really want to just replace the value of smiles **ex:** :D :( by a html with specific classes for each smile!
Various ways are there, simply you can try something like this
$('div.text-message').html(function(i,v){
return v.replace(':D','<div class="smile-happy">:D</div>')
.replace(':(','<div class="smile-sad">:(</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="message">
<div class="text-message">:D, :( Hello Wolrd!</div>
</div>
Is there a way to get a next element from a current sister element? Sorry if confusing.
<div class="wrapper">
<div class="paDiv">
<div class="saDivOne">
</div>
</div>
<div class="paDivTwo">
<div class="saDivTwo">
</div>
</div>
</div>
<script>
$('.paDiv').each(function(){
htmlContent = $(this).children().html();
SisterDivContent = $(this).next('.paDivTwo').children().html();
console.log(SisterDivContent);
})
</script>
$('.paDiv').each(function(){
var SisterDivContent = $(this).parent().find('.saDivTwo').html();
alert(SisterDivContent);
});
You have to add some contents inside div class 'saDivTwo'. Otherwise you will get empty content only.
Demo:
http://jsfiddle.net/U8n7g/
Try using .sibling:
$('.paDiv').sibling('paDivTwo').html()