2010-09-16 17:13:38 +00:00
<!DOCTYPE html>
2010-11-02 01:46:29 +00:00
< html lang = 'en' > < head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1" > < meta http-equiv = 'content-type' content = 'text/html; charset=UTF-8' / > < / head > < body >
2010-09-18 16:20:35 +00:00
< div data-role = "page" >
2010-09-21 14:58:54 +00:00
< div data-role = "header" >
2010-09-16 17:13:38 +00:00
< h1 > .replaceAll()< / h1 >
< / div >
2010-10-12 19:50:28 +00:00
< div data-role = "content" data-theme = "c" id = "replaceAll1" >
2010-09-16 17:13:38 +00:00
< h2 class = "jq-clearfix roundTop section-title" >
< span class = "name" > .replaceAll()< / span > < span class = "returns" > Returns: < a class = "return" href = "http://docs.jquery.com/Types#jQuery" > jQuery< / a > < / span >
< / h2 >
< div class = " entry-details" >
< p class = "desc" > < strong > Description: < / strong > Replace each target element with the set of matched elements.< / p >
< ul class = "signatures" > < li class = "signature" id = "replaceAll" > < h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/category/version/1.2/" > 1.2< / a > < / span > .replaceAll()< / h4 > < / li > < / ul >
< div class = "longdesc" >
< p > The < code > .replaceAll()< / code > method is corollary to < code > < a href = "/replaceWith" > .replaceWith()< / a > < / code > , but with the source and target reversed. Consider this DOM structure:< / p >
< pre > < div class="container">
< div class="inner first"> Hello< /div>
< div class="inner second"> And< /div>
< div class="inner third"> Goodbye< /div>
< /div> < / pre >
< p > We can create an element, then replace other elements with it:< / p >
< pre > $('< h2> New heading< /h2> ').replaceAll('.inner');< / pre >
< p > This causes all of them to be replaced:< / p >
< pre > < div class="container">
< h2> New heading< /h2>
< h2> New heading< /h2>
< h2> New heading< /h2>
< /div> < / pre >
< p > Or, we could select an element to use as the replacement:< / p >
< pre > $('.first').replaceAll('.third');< / pre >
< p > This results in the DOM structure:< / p >
< pre > < div class="container">
< div class="inner second"> And< /div>
< div class="inner first"> Hello< /div>
< /div> < / pre >
< p > From this example, we can see that the selected element replaces the target by being moved from its old location, not by being cloned.< / p >
< / div >
< h3 > Example:< / h3 >
< div id = "entry-examples" class = "entry-examples" > < div id = "example-0" >
< h4 > < span class = "desc" > Replace all the paragraphs with bold words.< / span > < / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< script src="http://code.jquery.com/jquery-latest.js"> < /script>
< /head>
< body>
< p> Hello< /p>
< p> cruel< /p>
< p> World< /p>
< script> $("< b> Paragraph. < /b> ").replaceAll("p"); // check replaceWith() examples< /script>
< /body>
< /html> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div > < / div >
< / div >
< / div >
< / div >
< / body > < / html >
