I have a div that contains div in HTML code, i just want to retrieve the string contained in that div, like the word LATTE or price:12 in the next code:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
<div id="items">
<div id="heapbox_46958322" class="heapBox">
…
</div>
<select class="basic-example" style="display: none;">
…
</select>
<div id="dummy">
…
</div>
<div id="gallery">
<div class="item_block">
…
</div>
<div class="item_block">
…
</div>
<div class="item_block hasoptions">
price:12
<div class="add_btn">
</div>
<div class="item_name">
LATTE
</div>
</div>
</div>
<div id="order_list">
…
</div>
</div>
<script type="text/javascript">
…
</script>
</body>
Fiddle Here
UPDATE
The answers help me get all the texts in all the divs that called item_Name , but i want it from the div i clicked as i'm using an onlclick event :
$('.item_block').on('click',function(){
// here is the tip
document.getElementsByClassName("add_btn").onclick =
alert($(".item_name").text());
.
.
.
You can use jQuery's .text() function.
Example:
$(".item_name").text();
This will retrieve the text inside all divs with the class item_name.
If you just want the text of the .item_name that you clicked on:
$(".item_name").click(function() {
$(this).text();
});
Demo: http://jsfiddle.net/UFMkQ/1/
Give that div a id
suppose id="getText"
In javascript
var value = document.getElementById('getText').innerText || document.getElementById('getText').textContent;
Try this, this is help to you, In this i just add text to your order_list div for how to add text in div
$('#order_list').html('XYZ');
Fiddle Here
You could use innerHTML attribute of div to get the text inside.
alert(document.getElementById('divid').innerHTML);
innerText on the object should allow you to not only retrieve but also overwrite the text
Related
Create a DIV and give it a data-cart-info attribute. Inside the DIV, create a HEADING with mdc-typography--headline4" as its CSS class.
My Solution:
<div data-cart-info="mdc-typography--headline4">
<h1>Heading</h1>
</div>
Please is my solution correct?
</head>
<body>
<div data-cart-info="mdc-typography--headline4"><h1>Heading</h1></div>
<script>
const supportedCards = {
visa : 'visa', mastercard : 'mastercard'
};
</script>
I am building a PayCard(Credit Card Validator)
No, because from the requirement sentence, the heading (the <h1>) is supposed to have the class, not the div:
<div data-cart-info><h1 class="mdc-typography--headline4">Heading</h1></div>
this is my code
<div data-cart-info>
<header class="mdc-typography--headline4"></header>
</div>
From the statement the (data-cart-info) should be the attribute of the div then then your heading [h1] should have class (mdc-typography--headline4)
Your code should be:
<div data-cart-info>
<h1 class="mdc-typography--headline4"></h1>
</div>
This might help:
<div data-cart-info>
<heading class="mdc-typography--headline4"></heading>
</div>
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
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()
I am new to jQuery and writing a script to change the color of a certain element based on whether or not the element it lies upon has been selected. My first problem is I am not able to edit the html structure and the way the structure is formed is causing some problems for me. Basically this is the structure:
<div class="item">
<div class="teamNames">
<span>Team 01</span>
<span>Team 02</span>
</div>
<div class="teamBlocks">
<div class="block 01">
<div>Home</div>
<div>0.65</div>
</div>
<div class="block 02">
<div>Home</div>
<div>0.65</div>
</div>
</div>
</div>
The team names have been absolutely positioned to lie over the blocks, so the content of the blocks looks like "Team Name Home 0.65".
When a block is selected its class becomes:
class="block 01 sel"
I am able to change the color of the "Home" and "0.65" text easily with CSS but changing the team name (Team 01/Team 02) is proving to be a lot more complicated and I am wondering if its possible to do this with or javascript or jQuery ?
Its also worth noting that the team names will never be the same so doing a selection based on the content is not possible
To change a specific team, you will need to give them unique identifiers, for example:
<div class="teamNames">
<span id="item1">Team 01</span>
<span id="item2">Team 02</span>
</div>
No you change select the specific span elements using jQuery. For example you want to change Team 01:
$("#item1").text("New Team Name");
Hopefully this is what you are trying to do.
if I get the question right, you can change the names with jquery like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".teamNames span:first").html("hello world");
});
</script>
Do you need to find team element by selected block?
If yes you can use $.index function for getting index of selected team:
var currentBlock = $('.sel');
var indexOfCurrentBlock = $('.block').index(currentBlock);
if (indexOfCurrentBlock != -1) {
var currentTeamName = $('.teamNames span').eq(indexOfCurrentBlock);
currentTeamName.text('aaaa');
}
http://jsfiddle.net/JRFv6/
Is this looking for class="block 01 sel" if it is selected
$(".block").click(function(){
$(".block").removeClass("sel");
$(this).addClass("sel");
});
DEMO
the way to change in elements not having id without to change html
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div class="item">
<div class="teamNames">
<span>Team 01</span>
<span>Team 02</span>
</div>
<div class="teamBlocks">
<div class="block 01">
<div>Home</div>
<div>0.65</div>
</div>
<div class="block 02">
<div>Home</div>
<div>0.65</div>
</div>
</div>
</div>
<script>
$(".teamNames span:eq(0)").html("New-Team-Name<br>");
$(".teamNames span:eq(1)").text("---- New Team Name");
</script>
</body>
</html>
hello all i`m good php developer not learn js yet..... my problem is
i have div
<div id="test1">
</div>
add div
i want when click in add div link, dublicte div and change number in id to be test2 , test3, unlimited
like the example
<div id="test1">
</div>
<div id="test2">
</div>
<div id="test3">
</div>
If you use jQuery this can easily be accomplished with the following:
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#div-creator').click(function(){
var numberOfDivs = $('.testClass').length;
$('<div id="test' + numberOfDivs + '" class="testClass">hi</div>').appendTo('body');
});
});
</script>
</head>
<body>
<div id="test1" class="testClass"></div>
Add Div
</body>
</html>
Demo can be found here: http://jsfiddle.net/4eDkJ/1/
Get the original div with document.getElementById()
Then create a new div with document.createElement('div')
Then loop on all the attributes for the first div, setting each one on the second div. Put in a case for element.getAttribute('id') and increment the number before you set it
When your new div is done, do originaldiv.parentNode.appendChild(newdiv)