asked on

jQuery: Replace replace text to change id

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

Gurvinder Pal Singh

$("#leadform1 > *").each(function(){
$(this).attr("id", ("zoo" + $(this).attr()) );
});

leakim971

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

Gurvinder Pal Singh

sorry it should be
$("#leadform1 > *").each(function(){
$(this).attr("id", ("zoo" + $(this).attr("id")) );
});

Gurvinder Pal Singh

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

hankknight

ASKER

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

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hankknight

ASKER

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

SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hankknight

ASKER

Thanks

leakim971

You're welcome! Thanks for the points!