Solved

how to text between br tags using jquery

Posted on 2013-12-11
6
1,297 Views
Last Modified: 2013-12-11
I want to change the color of the text "Password must be reset".how to find this text in jquery?

able to find "Change Password" text using this script.

console.log( $("#text-id h1").html().split("<br>")[0]);

<div id="text-id" class="signtext" style="">
Sign in to XXX
<h1>
Change Password
<br>
<br>
Password must be reset.
</h1>
</div>

Open in new window

0
Comment
Question by:chaitu chaitu
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 1

Expert Comment

by:husnilkhatimi
ID: 39711040
All the texts are in the same DIV.

1. You need to create a separated DIV for the "Password must be reset." and put a special class for it.
2. Add new CSS rule with the color you want inside the css file.

Example :
<div id="text-id" class="signtext" style="">
Sign in to XXX
<h1>
Change Password
</h1>
</div>
<br>
<br>
<div id="text-id" class="passwordtext" style="">
<h1>
Password must be reset.
</h1>
</div>

Open in new window

0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 39711043
can't we acheive this without adding new div tag?
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 39711047
Hi,
the easiest would be to simply use a replace:
$(document).ready(function () {
    var oldContent = $("#text-id").html();
    $("#text-id").html(oldContent.replace("Password must be reset.","<span class='highlight'>Password must be reset.</span>"));
});

Open in new window


Sample:
http://jsfiddle.net/EE_RainerJ/vTsr5/

HTH
Rainer
0
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 
LVL 20

Author Comment

by:chaitu chaitu
ID: 39711052
why "Password must be reset" text is not coming for below script.
to create new div tag first i need to find out the text right..
need to create another div tag after br tag..how to do it?i need to do it dynamically?

console.log( $("#text-id h1").find("br" ).next().next().html());
0
 
LVL 22

Expert Comment

by:Mrunal
ID: 39711058
hi
you will not get this to be executed.
Reason:

$("h1").text() will give you complete string not separated by <br/> tag.

So the solution for this is:
Update your design/html code like:

<p id="CPWD">
Change Password</p>
<br>
<br>
<p id="RPWD">Password must be reset.</p>

and then write simple jQuery function:

alert($("#RPWD").text());

Hope this helps you.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39711086
Just use a SPAN tag - easy :)

//HTML
<div id="text-id">
   <h1>Change Password<br><br><span>Password must be reset.</span></h1>
</div>

//jQuery
$('#text-id h1 span').text('something new');

Open in new window

0

Featured Post

Containers and Docker for Everyone

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question