Replace a element instead another element by jQuery - javascript

I want replace a(or each) element(number) instead another element(number) in a class while running page.
I try as following code but doesn't word true, what do i do?
DEMO: http://jsfiddle.net/yMnDt/
<div class="myGrid">
1
<p>
123145
</div>​
$(".myGrid").clone().find('1').replaceWith( "8" );
​

If you want replace ONLY number 1 with 8 You need to do the follwing change
you need to put "1" in span tag
please check the Below link
http://jsfiddle.net/8nrS2/1/

Is this what you want? http://jsfiddle.net/yMnDt/7

This uses replaceWith and no alert in the body
http://jsfiddle.net/T2GAZ/

Related

Replace the first header text with jquery

I have headers like
<h3 class="left_header">First job partner</h3>
<h3 class="left_header" style="text-align:center;">Don't have an account ?</h3>
Now i want to replace the first header with Job partner. how to do it by jQuery or Java script.
Try to grab the h3 tags with the class .left_header and take the first instance from the element collection using :first selector,
$('h3.left_header:first').text('Job partner')
DEMO
Try this:
$('h3:first-child').html('sublink_active');
Working Demo
Try this
$("h3:first-child").html("Job Partner")
demo
try with this.
$(".left_header:first").html("yourNewTitle");
JQuery :
$('.left_header').first().text("Job Partner");
you can use.first() (http://api.jquery.com/first/)
$( "h3" ).first().html("Job partner");
OR
you can use jQuery( ":first" ) (https://api.jquery.com/first-selector/)
$(".left_header:first").html("Job partner");
fiddle
Your code :
jQuery(".left_header h3").text("Public offers");
your code didn't match with your requirement. Because above code select all h3 elements under the "left_header" class. And In your HTML h3 have an class left_header. So you should use following selector to select elements-
$("h3.left_header");
Now you want to select only first element, so you can use index number like this -
document.getElementsByClassName("left_header")[0].innerText = "Job Partner";
OR
var g = $("h3.left_header");
$(g[0]).text("Job Partner");
Demo1
Demo 2
Note: There are more than one way exist to accomplish this task-
$(".left_header:first").text("Job Partner");
Working demo 1

javascript appended to div is coming as a string

I have a java script
$('#linegraph').append(sparkLineData);
where the value of sparkLineData is 1,2,3,4,5,6,7
where
<div id="linegraph"></div>
where in this div i need to append the values like
<div id="linegraph">1,2,3,4,5,6,7</div>
but why is it coming as
<div id="linegraph">"1,2,3,4,5,6,7"</div>
why does it happen like this? It seeems like it is appending as a string.Is there any solution for this to remove the " " ?
Use text() instead:
$('#linegraph').text(sparkLineData);
Also, shouldn't the selector be #sparkLineData?
Use .text()
Try this
$("#linegraph").html(sparkLineData)
Try text()
$('#linegraph').append(sparkLineData);
change to
$('#linegraph').text('Your data');
Try jquery replace power
$('#linegraph').append(sparkLineData).replace('"','');

how to get span value and add the value as class/id to DOM

Please help, I need to get the value of the span eg. <span itemprop="title">God Of War</span> which is "God Of War" and assign the value as an ID or Class to a div. How can I do that in Javascript?
<span itemprop="title">God Of War</span>
<div>You will see result here</div>
<button>Do</button>
jQuery
$(function(){
$('button').click(function(){
$('div').attr('class', $('span[itemprop="title"]').html())
.html('filled a class');
});
});
Click the button -> Right click the div -> inspect element -> and you will see your div has been filled with class you want.
See here -> http://jsfiddle.net/aldiunanto/HdPWs/
You tagged your post as jquery so I'm assuming jquery is acceptable. Take a look at these functions in the jquery api for more details.
$('div').attr('id', $('span[itemprop="title"]').html());
Frist you can assign a class or id to the span then
Use Javascript simple
document.getElementById('spanid / class').innerHTML;

Find element that is not inside specific parent

I am trying to figure out how to find an element that is NOT inside specific parent. Here is a sample html:
<div class="id01">
<p>some text</p>
</div>
<p>some more text</p>
<p>some more more text</p>
Ok, now I need to find a first paragraph that is not inside parent #id01 and that is where I am getting lost. I started to do it like that
$('p:first').text(); //this way i would get the P inside DIV but I want to skip that one and count on next one that has no parent #01
Hope i made it clear.
You could easily use the :not() selector for that, in combination with :first .
$("p:not(.id01 p):first").text()
JSFiddle.
Solution 1 :
$('p').not('.id01 *').eq(0)
Solution 2 :
$('p').filter(function(){ return $(this).closest('.id01').length==0 }).eq(0)
Very simple way, as suggest by adamb all this stuff is on the jQuery site, but here
$("p:first").not($(".id01 p"));
Should give you what you want.
you could use the .next() selector
$("div.id01").next('p')
Use eq() for the index of <p>
console.log($('p').eq(1).text()); //some more text
console.log($('p').eq(2).text()); //some more more text

Combine after() and slideDown()

I am adding an element on a certain condition. But I don't want it suddenly appear but rather would like to slide it down. Here's how I add it:
$('.myDiv').after('<div>added content</div>');
How do I combine it with slideDown?
Try this instead :
$(".myDiv").after("<div style='display:none;'>added content</div>");
$(".myDiv").next("div").slideDown();
Good Luck !!
Try this out:
$('.myDiv').after('<div style="display:none">added content</div>').next().slideDown();
You need to use .next() on the div to which it is attached because .after()... adds the element as a sibling to the div to which it is added
Try this
$('.myDiv').after('<div style="display:none;" class="newDiv">New Content</div>');
$('.myDiv').next('.newDiv').slideDown();
first make sure the new content that you input is hidden using .newdiv{display:none;} either in your css file or inline code like: <div style="display:none;">
then use a callback function to only start after the code was inserted in the document when you used the after() method.
$('.myDiv').after('<div class="newdiv">added content</div>', function(){
$('.newdiv').slideDown();
});

Categories