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
Solved

jQuery: Replace replace text to change id

Posted on 2010-09-24
10
668 Views
Last Modified: 2012-08-14
I want to change the id value using jQuery.  So I need to find
       id="  
and replace it with
       id="zoo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>

<style type="text/css">
#p1, #p2 {color: red}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>

<p><a href="#" id="rq1">Click Here to change ID values</a></p>

<div id="leadform1">

<p id="p1">Hello</p>
<p id="p2">World</p>

</div>

<h1>Footer</h1>

<script type="text/javascript">
/* <![CDATA[ */

$(document).ready(function(){
 $('#rq1').click(function() {
  alert('I want to add "zoo" to the beginning of every id inside leadform1');
  return false;
 });
});

/* ]]> */ 
</script> 

</body>
</html>

Open in new window

0
Comment
Question by:hankknight
  • 4
  • 3
  • 3
10 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33753461
$("#leadform1 > *").each(function(){
   $(this).attr("id", ("zoo" + $(this).attr()) );
});
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33753463
You should not set the same id for multiple object. WIth an indice :
Use :


$(document).ready(function(){
 $('#rq1').click(function() {
  var i = 0; // indice to have distinct id
  $("p","#leadform1").each(function() { // only paragraph
//      alert('I want to add "zoo" to the beginning of every id inside leadform1');
      $(this).attr("id", "zoo"+i++);
//      return false;
  });
 });
});

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33753507
sorry it should be
$("#leadform1 > *").each(function(){
   $(this).attr("id", ("zoo" + $(this).attr("id")) );
});
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 33753565
this worked for me
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>

<style type="text/css">
#p1, #p2 {color: red}
</style>
<script type="text/javascript" src="jquery-1.js"></script>
</head>
<body>

<p><a href="#" id="rq1">Click Here to change ID values</a></p>

<div id="leadform1">

<p id="p1">Hello</p>
<p id="p2">World</p>

</div>

<h1>Footer</h1>

<script type="text/javascript">
/* <![CDATA[ */

$(document).ready(function(){
 $('#rq1').click(function() {
  alert('I want to add "zoo" to the beginning of every id inside leadform1');
  $("#leadform1").children().each(function(){
	alert($(this))
    $(this).attr("id", "zoo" + $(this).attr("id") );
});
  return false;
 });
});

/* ]]> */ 
</script> 

</body>
</html>

Open in new window

0
 
LVL 16

Author Comment

by:hankknight
ID: 33754225
Thank you both.  Unfortunately your ideas do not work for me because they are not recursive.  Please test the code below and you will see the problem, thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.js"></script>

<style type="text/css">
#p1, #p2 {color: red}
</style>

</head>
<body>

<p><a href="#" id="rq1">Click Here to change ID values</a></p>

<div id="leadform1">

<div>
<p id="p1">Hello <span id="p2">World</span></p>

<form id="xyz" action="./" method="get">
<p>
<input type="text" name="foo" id="zooph" />
<label for="foo">Company Name:</label>
</p>
</form>

</div>
</div>

<h1>Footer</h1>

<script type="text/javascript">
/* <![CDATA[ */

$(document).ready(function(){
 $('#rq1').click(function() {
  var i=0;
  $("#leadform1").children().each(function(){
    var r = Math.floor(Math.random()*99);
    if($(this).attr("id"))  $(this).attr("id", "i" + r + "_" + (i) + $(this).attr("id"));
    if($(this).attr("for"))  $(this).attr("for", "i" + r + "_" + (i) + $(this).attr("for"));
    if($(this).attr("name") )$(this).attr("name", "i" + r + "_" + (i) + $(this).attr("name"));
});
  return false;
 });
});

/* ]]> */ 
</script> 

</body>
</html>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 33754291
Use .find() instead of .children() in this case : http://api.jquery.com/find/


$("#leadform1").find().each(function(){

Open in new window

0
 
LVL 16

Author Comment

by:hankknight
ID: 33756168
Thanks, but how can I use find to find/replace everything?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.js"></script>

<style type="text/css">
#p1, #p2 {color: red}
</style>

</head>
<body>

<p><a href="#" id="rq1">Click Here to change ID values</a></p>

<div id="leadform1">

<div>
<p id="p1">Hello <span id="p2">World</span></p>

<form id="xyz" action="./" method="get">
<p>
<input type="text" name="foo" id="zooph" />
<label for="foo">Company Name:</label>
</p>
</form>

</div>
</div>

<h1>Footer</h1>

<script type="text/javascript">
/* <![CDATA[ */

$(document).ready(function(){
 $('#rq1').click(function() {
  var i=0;
  $("#leadform1").find().each(function(){
    var r = Math.floor(Math.random()*99);
    if($(this).attr("id"))  $(this).attr("id", "i" + r + "_" + (i) + $(this).attr("id"));
    if($(this).attr("for"))  $(this).attr("for", "i" + r + "_" + (i) + $(this).attr("for"));
    if($(this).attr("name") )$(this).attr("name", "i" + r + "_" + (i) + $(this).attr("name"));
});
  return false;
 });
});

/* ]]> */ 
</script> 

</body>
</html>

Open in new window

0
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 250 total points
ID: 33756242
hmm...leak is right, find() is the recursive version of children()

This will find all descendants: $(this).find('*');

0
 
LVL 16

Author Closing Comment

by:hankknight
ID: 33773711
Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33773718
You're welcome! Thanks for the points!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html form and modal / img src -problem 3 28
Explain this javascript function to me 2 25
Bootstrap date picker V2 date restriction 6 29
Search Item in Table 2 19
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

789 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