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
Related
Thanks for reading my post..
Just consider the below scenario of html architecture.
<div class="wrapper">
<div class="doubt-123232" id="value"></div>
<div class="question></div>
<div class="doubt-232323" id="query"></div>
</div>
In the above DOM if you need to select the class starting with doubt-***** (which include doubt-123232, doubt-232323) all at a time and do processing using jQuery.
We can select each class one by one and do processing, but in my page I have lot like this . I cant do it for each class to select and do processing then it became a trivial process.
Is there way to select the similar class or id all at time for processing in jQuery?
Thanks.
Yes, you can do this using Attribute Starts With Selector:
var divs = $('div[class^="doubt-"]');
You can use:
var items = $('div[class^=doubt]');
This is known as the "starts with" selector.
Alternatively you could use:
var items = $('div[class*=doubt]');
which is the "contains" selector.
Note that in this case, doubt is one word. If there are multiple words with spaces in between, you should put quotes around them. It is not required to quote single words.
See here for documentation on the "starts with" selector.
You can use Attribute Starts With Selector [name^="value"]
var divs = $('div[class^="doubt-"]');
selecting them all:
var doubts= $('[class^="doubt-"]');
then you access them:
doubts.each(function(index){
this. ... // and so on
});
Try somthing like this:
$("[class^=doubt-]").each(function(){ //do some staff });
I have a click event and I want to add a class to the current element clicked plus an other element and I want to do that in one line.
I have tried something like
JS file
$('div').click(function(){
$(this, 'span').css('background','yellow');
// could usethe following way but it's not DRY
// $(this).css('background','yellow');
// $('span').css('background','yellow');
});
HTML file
<div>
div
</div>
<span>
span
</span>
Here is a fiddle for exemple
But it doesn't works so how can I do without repeating the css method.
You can use .add(selector) method like so:
$(this).add('span').css('background','yellow');
You can add the <span> elements to the $(this) jQuery instance:
$(this).add( $('span') ).css('background', 'yellow');
or even:
$(this).add('span').css('background', 'yellow');
http://jsfiddle.net/Hhqc8/7/
Try siblings():
$('div').click(function(){
$(this).siblings('span').css('background','yellow');
})
Example:
http://jsfiddle.net/Hhqc8/6/
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();
});
Say that we have this html code
<div id="test">
<h2>Title</h2>
<p>lorem ipsum</p>
</div>
And this jQuery
$("#test h2").text("Changed Title");
Now what is the correct way to continue down to the <p> and also change it's text, without going up one level.
Like next() will only look for the next h2, but is there something that gets the sibling independent of element type. Something like next("p"); maybe?
next chooses the next element: by default it does not only select an element of the same type.
$('#test h2').next(); // selects the p
$('#test h2').next('p'); // selects the p
$('#test h2').next('h2'); // does not select the p
Unless you provide a selector, next will choose the next sibling element. You can therefore do this:
$('#test h2').text('Changed title').next().text('Changed text');
The command your looking for is siblings("p")
Here is your example, updated:
$("#test h2").text("Changed Title").siblings('p').text('test');
.next( 'p' ) will do the trick:
$("#test h2").text("Changed Title")
.next( 'p' )
.text( 'Another change' );
From the jQuery docu:
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
See example fiddle here.
.next('p') will indeed work. Just chain it at the end. like this:
$('#test h2').text("Changed Title").next('p').text('I changed too');
$("#test h2").text("Changed Title").siblings().text("");
Just like you suggested,
$("#test").next("p").text('yada');
or even better:
$("#test h2").text("Changed Title").next("p").text('yada');
Exactly, you can do it by using the .next('p') method:
$("#test h2").next('p').text("...");
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/