I have an h1 with id of toptitle that is dynamically created, and I am not able to change the HTML.
It will have a different title depends on a page. Now when it is Profile, I want to change it to New word with jQuery.
<h1 id="toptitle">Profile</h1> // Changing only when it is Profile
// to
<h1 id="toptitle">New word</h1>
Note: If the text is Profile, then change it to New word.
This should work fine (using .text():
$("#toptitle").text("New word");
Something like this should do the trick:
$(document).ready(function() {
$('#toptitle').text(function(i, oldText) {
return oldText === 'Profil' ? 'New word' : oldText;
});
});
This only replaces the content when it is Profil. See text in the jQuery API.
Something like this should work
var text = $('#toptitle').text();
if (text == 'Profil'){
$('#toptitle').text('New Word');
}
Could do it with :contains() selector as well:
$('#toptitle:contains("Profil")').text("New word");
example: http://jsfiddle.net/niklasvh/xPRzr/
Cleanest
Try this for a clean approach.
var $toptitle = $('#toptitle');
if ( $toptitle.text() == 'Profile' ) // No {} brackets necessary if it's just one line.
$toptitle.text('New Word');
$('#toptitle').html('New world');
or
$('#toptitle').text('New world');
Pretty straight forward to do:
$(function() {
$('#toptitle').html('New word');
});
The html function accepts html as well, but its straight forward for replacing text.
*In my case i have stored the new Value in the var altText
$('#toptitle').text(altText);
*
And it Worked
Related
I'm trying to change the "10" in the HTML below using jQuery:
<div id="ingredients">
<h2>Ingredients</h2>
<h4>Sugar: <span class="sugar">10</span></h4>
Here have been the iterations that I've gone through that have been unsuccessful:
$(document).ready(function() {
$('#ingredients.sugar').html("5");
});
and
$(document).ready(function() {
$('span[class=sugar]').html("5");
});
In addition, how would I store the value of "10" in a variable? I'm trying to do this:
var $sugar = $('#ingredients.sugar').html();
Would that work?
Thanks!
Henry
Try:
$(document).ready(function() {
$('#ingredients .sugar').html("5");
});
Notice the space between; this says look for a .sugar child from the #ingredients parent. You should also be able to do:
var val = $('#ingredients .sugar').html();
You have missed space in your selector, this will work:
$('#ingredients .sugar').html("5");
Here's a version with a simplified selector (don't need #ingredients), factory caching and update without using quotes (5 works fine).
// Document ready
$(function () {
var $sugar = $( '.sugar' ), // Cache jQuery factory
originalValue = $sugar.html(); // Cache original value
// Update value
$sugar.html( 5 );
});
All right, I have a div tag which got a class="blog-post" and id like id="article-23" (where "23" could be any number, as it is id of blog post in a database). I need to somehow get just a number from that id and than apply some rules to that div tag. So say:
if number from id % 2 == 0 {
set text colour black to associated div tag with class of blog-post
} else {
set text colour white to associated div tag with class of blog-post
}
Thats just a "pseudo" code to show logic that I wan't to apply dependent if number from id is even or odd, but the question remains same, how do I just get number from id like "article-23" ?
As simple as
var number = "article-23".match(/\d+/)[0];
But you have to be sure that any digit exists in the string, otherwise you'd get a error.
You can actually apply rules via function, which makes this the cleanest solution (in my opinion):
$(".blog-post").css('color', function () {
return +this.id.replace('article-', '') % 2 ? 'blue' : 'red';
});
http://jsfiddle.net/ExplosionPIlls/Jrc5u/
Try this:
$('.blog-post[id^="article-"]').each(function () {
if (parseInt(this.id.replace('article-', '')) % 2 === 0) {
$('#' + this.id).css('color', 'black');
} else {
$('#' + this.id).css('color', 'white');
}
});
jsFiddle Demo
As an alternative, HTML5 supports these things called "data attributes", which are specifically meant for attaching data to your DOM without abusing things like the "class" or "id" attributes. jQuery provides a handy .data method for reading these attributes in a more obvious way.
You can add your own numeric ID attribute using something like "data-id":
<div class="blog-post" data-id="23" />
$("#blog-post").each(function () {
console.log($(this).data("id")); // Look up the data-id attribute
});
If I'm understanding correctly, you want the number after the hyphen of the id tag of your .blog-post class.
var article = $(".blog-post").attr('id'); //get the id
var article = article.split("-"); // split it on hyphens
return article = article[article.length-1]; // return the last element
I cant figure out the syntax for this iv browsed the net when i mention "P" it returns multiple searches regarding PHP
What i want to do is populate a p tag text with a variable value?
This is my Jquery
$('.FOS, .MF, .CW, .OO, .LL, .CO, .TAK, .FCS, .CO').mouseover(function(e) {
var tr = $(this).closest('tr');
var Comments = tr.find('.GeneralComments').text();
if (Comments != "") {
$('div#pop-up').show();
$('p').text == Comments;
} else {
$('div#pop-up').hide();
}
return false;
});
Im trying to assign the value from Comments to the p.text but its not working?
Heres my div where the p take is situated.
<div id="pop-up">
<h3>
Over all Notes</h3>
<p>
This is where i want the value from comments to appear?
</p>
</div>
Any help would be appreciated, thank you.
This will fill the paragraph tag inside #pop-up with the text inside the Comments variable
$("#pop-up > p").text(Comments);
I suggest you have a read of the API here.
Here is the right syntax.
$("#pop-up > p").text(Comments);
Best way is to add ID for that p tag. and use ID to populate comments, like add id comments to that p tag and you can use:
$("p#comments").text(Comments);
if (Comments != "") {
$('div#pop-up').show();
$('p').text(Comments);
}
== is a comparison operator, not an assignment operator.
Also in jQuery, you pass the assignment you want to make into the function as an argument.
if (Comments != "") {
$('div#pop-up')
.show()
.find('p')
.text(Comments);
}
See docs for the .text() method.
I have a UserControl. Ex:
<div id="divItem">
some html
</div>
The ajax request return new html of this UC from server. Ex:
<div id="divItem">
new html
</div>
I want to replace the old html by the new one. How could I do that. Thanks.
If you also return the div divItem
$("#divItem").replaceWith("NEW HTML");
Put the new HTML on the spot or replace the innerHTML, since they got the same container:
$("#divItem").html($("NEW HTML").html());
If you dont return the div divItem
Just put the new html:
$("#divItem").html("NEW HTML");
I guess replaceWith is what you search.
$('#divItem').replaceWith(serverResponse);
Placing data from AJAX calls into a DOM element can be done using .load().
$('#divItem').load('somePage.html');
If you want to replace 1 item with multiple items. You can try:
var item_1 = $('<div>').text('item 1');
var item_2 = $('<div>').text('item 2');
var item_3 = $('<div>').text('item 3');
// 1/.
// dont' use this way because it's hard to read
$('#divItem').prop('outerHTML', item_1.prop('outerHTML') + item_2.prop('outerHTML') + item_3.prop('outerHTML'));
// 2/.
// dont' use this way because it's same to the first's
$('#divItem')[0].outerHTML = item_1.prop('outerHTML') + item_2.prop('outerHTML') + item_3.prop('outerHTML');
// 3/.
// if you use this way, how can we continue replace "#divItem" with "item_2"?
var obj = $('#divItem').replaceWith(item_1);
// "replaceWith" returns an object which was replaced with "item_1"
// there is no way to continue with "item_2" and "item_3"
// sure, if you DON'T want to write a new line
item_1.after(item_2);
// or
item_2.insertAfter(item_1);
// 4/.
// if we write this, the result should be: "item 3item 2item 1"
$('#divItem').after(item_1).after(item_2).after(item_3);
// so, the correct **inline** solution should be:
$('#divItem').after(item_3).after(item_2).after(item_1).remove();
You just need
$('#divItem').html('new html');
This just replaces the div's innerHTML: http://api.jquery.com/html/
I have two URL's
url 1 = www.xyz.co.uk/asd.qmd
url 2 = www.xyz.co.uk/asd.qmd?getstep=4#
I want to show a div(left) when PAGE URL is www.xyz.co.uk/asd.qmd?getstep=4#
In the page form.php I wrote the following code:
<script>
$(function(){
var locate = window.location;
if (locate=="http://localhost/school/form.php") {
$('#left').hide();
} else {
$('#left').show();
}
});
</script>
<body onload="function()">
<div id="left">
aasdsasdfdsgfg
</div>
</body>
Why is this not working?
Just make php condition
<?php
if($_GET['getstep']){
}
?>
$('#left').toggle(window.location.href !== "http://localhost/school/form.php");
You need to make a show/hide function the proper javascript way. What you are doing at first with the (I assume) jQuery is beyond me - just declare a simple function containing the code you already have to show/hide and attach it to the onload-event.
If you just want to hide the div when the query string is empty, you could use the search property of the window.location object:
$(function(){
if (window.location.search === "") {
$('#left').hide();
} else {
$('#left').show();
}
});
Anything more complicated (i.e. a different div for each page value) and I recommend you look at regex
You need to use the href property of the window.location object.
var locate = window.location.href,
myElement = $('#left');
locate == "http://localhost/school/form.php"
? myElement.show()
: myElement.hide();