$('button').click(function(){ $(this).prev('label').append('<b>ed</b>').text('Press');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Click<b>ed</b></label>
<button>Here</button>
I want to keep the element <b></b> or any element exisiting changing the .text()
The steps i'm trying to handle is the following
.append('<b>ed</b>') at first i appended the new element <b>;
Driectly after appending the new element i changed the text to Press .text('Press');
What i'm trying to do is copying the added <b>ed</b> element before changing the text .text('Press'); then add it again after changing the text()
So it would be like
var element = $(this).prev('label').clone('b');
$(this).prev('label').append('<b>ed</b>').text('Press'+element+'');
The problem i keep getting the element value = [Object object]
Just use .html() method in order to display the text desired as HTML.
$('button').click(function(){ $(this).prev('label').html('Press<b>ed</b>');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Click<b>ed</b></label>
<button>Here</button>
Another solution:
$('button').click(function(){ $(this).prev('label').empty().append('<b>ed</b>').html('Press'+$(this).prev('label').html());
})
In order to access the text part, you need to use .contents()
See this answer and comments for more info.
$("#x").append("<b> pressed</b>")
.contents().filter(function(){return this.nodeType == 3;}).first()
.replaceWith("well done");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='x'>Press</div>
Here is an example using .text() and .append(). Keep in mind that .text() will replace the element's content in its entirety, so it's important to use .append() last.
$('button').on('click', function() {
var boldedElem = $(this).prev('label').find('b');
$(this).prev('label').text('Press').append(boldedElem);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Click<b>ed</b></label>
<button>Here</button>
Look for all <b> in this label, take the last one and modify its content using html()
$('button').click(function(){
var label = $(this).prev('label');
label.find('b').last().html('Press');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Click<b>ed</b></label>
<button>Here</button>
Related
I got a piece html code like this:
<div><span>span_text</span>div_text</div>
I want to change 'div_text' with jQuery, tried with $.text('changed_div_text') but failed, result like this which is not what I want.
let tmpl = '<div><span>span_text</span>div_text</div>'
let $ = cheerio(tmpl)
console.log($.text()) // span_textdiv_text
$.text('changed_div_text')
console.log($.text()) // changed_div_text
As you can see, text() function will change inner text also, hope someone know a way to solve this problem, thanks!
jQuery doesn't offer a lot of methods that act directly on text nodes. You can use contents to find all child nodes (including text nodes), and you can use filter to find only text nodes, and then you can modify their nodeValue to change their text. Example:
// Get just the text nodes
var textNodes = $("#target").contents().filter(function() {
return this.nodeType === Node.TEXT_NODE;
});
// In this case, I just replace the text with "Index n" where n is the index
textNodes.each(function(index) {
this.nodeValue = "Index " + index;
});
<div id="target"><span>span_text</span>div_text</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
you have to know the text div_text is the childNode of div,and it is kind of textNode
var div=document.createElement('div');
div.innerHTML='<div><span>span_text</span>div_text</div>';
div.childNodes[0].childNodes[1].textContent='test';
console.log(div.innerHTML);//<div><span>span_text</span>test</div>
if you want to change the text,you can change the value of the textNode,for example,change the textContent ,innerText or innerHTML,,,
your html code is <div><span>span_text</span>div_text</div>
for your understanding I am assuming a button with id btn. clicking this button the text will be changed
button code <button id="btn">change</button>
now if you want to change all the child text of the div then the below code will work fine.
$(document).ready(function(){
$("#btn").click(function(){
$("div > span").text("changed_div_text");
});
});
now if you only want to change the last child of the div then the code is below
$(document).ready(function(){
$("#btn").click(function(){
$("div > span:last-child").text("changed_div_text");
});
});
hope it will solve your issue
So I have a very basic need here and I can't figure out why it does not work.
For testing purpose I have 100 div's with id's of d_fav100, d_fav101, etc ...
And it just looks like a bunch of these
<div id='d_fav100'>This is DIV 100</div>
.
.
.
My jquery catch to grab the divs looks like this ...
$("[id^='d_fav']").click( function() {
var fav = $(this).val();
alert(fav);
});
However, I cannot get the value in the div assigned to the variable fav. The alert is always blank.
What am I missing?
Thanks for looking!
JT
For a div, you should use the .text() method:
Codepen
$("[id^='d_fav']").click( function() {
var fav = $(this).text();
alert(fav);
});
.val() will get the value for inputs/textareas.
Jquery's text()
It seems you need to delegate the event. Also div does not have any value attribute. If you want to get the text use jquery text method
$('body').on('click' ,"div[id^='d_fav']",function(e){
console.log($(this).text().trim())
})
DEMO
If I understand correctly - you do not want the actual text of the div, but the value (number) of the div - ie: the 100 portion - which is the same in the id of the div.
Use a class and get the id from the div on the click event - remove the d_fav portion using substr(5) - and the remainder is the number you are after.
if it is the text you are after - then you can use the same code but use the .text() method as already described.
$(".d_fav").click( function() {
var fav = $(this).attr('id').substr(5);
alert(fav);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="d_fav" id='d_fav100'>This is DIV 100</div>
<div class="d_fav" id='d_fav101'>This is DIV 101</div>
<div class="d_fav" id='d_fav102'>This is DIV 102</div>
I need to get the value from a "p" element, I draw this "p" with jQuery and it's ok, then I have a button and when I click on it I want to display the value from "p" element but I don't get any information, here is a simple code example:
$(document).ready(function() {
$('#c').click(function() {
var p = $('#p1').val();
alert(p);
});
draw();
});
function draw() {
var html = "";
html += '<p id="p1">Hi</p>';
$('#d').html(html);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="c">Click</button>
<hr />
<div id="d">
</div>
How can I solve this? I don't get any console error.
Change :
var p = $('#p1').val();
To :
var p = $('#p1').text();
.val() only returns the value from input, textarea and select elements. If you just want to read the content of an element, you should use .text() or .html(). The first returns just the text, and the second – HTML content of an element.
Here is the quote from jQuery
The .val() method is primarily used to get the values of form elements
such as input, select and textarea. When called on an empty
collection, it returns undefined.
So as #ehsan suggested, use .text() method if you want to get content as text.
.val() is used to get the value of input, select and textarea elements.
If you want to get the text inside an element (e.g: div, p, etc), you need to use .text().
So, in your case, you need to change this:
var p = $('#p1').val();
for this:
var p = $('#p1').text();
Note: If you want the full html code inside an element, you need to use .html().
Sources:
http://api.jquery.com/val/
http://api.jquery.com/text/
http://api.jquery.com/html/
you can also use var p = $('#p1').html();
well i know many of you would cast it as duplicate but i wanna justify that i have tried everything that i know but its not working, even seeing all answers from SO didnt rectified my problem.Coming to my question
here is my JQuery code-
<script type="text/javascript">
window.onload = show_cart_count();
function show_cart_count(){
var get_count=2;
alert(get_count);
$("#show_count").val(get_count);
//$("#show_count").innerHTML('get_count');
}
</script>
and here is my div tag
<div id="show_count" class="show_count" >0</div>
but despite my efforts the value of show_count doesn't get printed in div.
EDIT-
Just tried my code by placing div to another place and it was working.Any guesses about why its not showing on that particular position
<div class="check"> <a class="bag-icon" href="">Bag(<div id="show_count" class="show_count" >0</div>
0)</a> </div>
This is its surrounding Code.. Any guesses whats wrong in here :)
Use text or html of jQuery.
and 2nd Use document.ready()
function show_cart_count(){
var get_count=2;
// alert(get_count);
$("#show_count").text(get_count);
//$("#show_count").html(get_count);
}
$(document).ready(function(){
show_cart_count();
});
div elements don't have a value property, so you should use text() or html() to update their content:
$("#show_count").text(get_count);
If you want to set the innerText directly you can do either of the below:
$("#show_count")[0].innerText = get_count;
// or
$('#show_count').prop('innerText', get_count);
$(function(){
var get_count=2;
alert(get_count);
$("#show_count").html(get_count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="show_count" class="show_count" >0</div>
For div elements you need to use the html() function instead of Val()
$("#show_count").html("new content");
Use the jquery text function for non-input elements:
var get_count = 2;
$("#show_count").text(get_count);
You are actually executing the function show_cart_count() and assigning what the function returns to window.onload
So window.onload = show_cart_count(); should rather be window.onload = show_cart_count;
jQuery function .val() works for TextArea, Input, Select etc for others to change the innerText you use the fn .text() and to change the innerHTML you use fn .html()
So it will be $("#show_count").text(get_count); or $("#show_count").html(get_count); rather than $("#show_count").val(get_count);
I'm probably being especially dense about this, but I can't get an element to return using prev(). My basic HTML structure is:
<div>
<table></table>
</div>
<input type="button">
Where when I press the button, I want to get the previous element (the div element). To achieve this my button has a function attached to it with
var nearestDiv = $(this).prev();
When I've checked the contents of nearestDiv in the console it appears to be some kind of JQuery object rather than a HTML div. I've tried popping .val() at the end of .prev() but this comes back empty. How can I get the div element?
Note that my button is generated on the fly and doesn't have anything which identifies it.
you need to use jquery get function, to get a native html object and not the jquery wrapper:
$("input").on("click",function(){
console.log("jquery wrapper:",$(this).prev());
console.log("native html div object:",$(this).prev().get(0));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table></table>
</div>
<input type="button">
If your html structure is same as you provided in the question, it will definitely return the div element. Note that there is no val() method for div element, you need to either use .html() or .text() inorder to get the contents.
$("input[type='button']").click(function () {
var div = $(this).prev();
alert(div.html());
alert(div.text());
});
Fiddle
You need to give .text() or .html() for standard HTML Elements. So your code should be:
var nearestDiv = $(this).prev().html();
var nearestDiv = $(this).prev().text();