[Функция] replaceWith(content)
Раздел "Manipulation"
Функция заменяет все подходящие элементы заданным HTML кодом или DOM элементами. Функция так же возвращает JQuery элемент, который был только что заменён, который удалён из DOM структуры.
Параметры
replaceWith(content)
1.2
content: код, заменяющий походящие элементы элементы.
replaceWith(function)
1.4
function:
функция, возвращающая HTML строку, которая заменяет набор подходящих элементов.
Примеры
Пример:
По клику заменить кнопку на элемент div, содержащий текст кнопки.
"jQuery"
$("button").click(function () { $(this).replaceWith("<div>" + $(this).text() + "</div>"); });
"HTML"
<button>First</button> <button>Second</button> <button>Third</button>
"CSS"
button { display:block; margin:3px; color:red; width:200px; }
div { color:red; border:2px solid blue; width:200px;
margin:3px; text-align:center; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function () { $(this).replaceWith("<div>" + $(this).text() + "</div>"); }); }); </script> </head> <body class="iframe"> <button>First</button> <button>Second</button> <button>Third</button> </body> </html> <style> button { display:block; margin:3px; color:red; width:200px; } div { color:red; border:2px solid blue; width:200px; margin:3px; text-align:center; } </style>
Пример:
Заменить все параграфы на элемент b.
"jQuery"
$("p").replaceWith("<b>Paragraph. </b>");
"HTML"
<p>Hello</p> <p>cruel</p> <p>World</p>
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").replaceWith("<b>Paragraph. </b>"); }); </script> </head> <body class="iframe"> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
Пример:
Заменить все параграфы на пустой элемент div.
"jQuery"
$("p").replaceWith(document.createElement("div"));
"HTML"
<p>Hello</p> <p>cruel</p> <p>World</p>
"CSS"
div { border:2px solid blue; margin:3px; }"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").replaceWith(document.createElement("div")); }); </script> </head> <body class="iframe"> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html> <style> div { border:2px solid blue; margin:3px; } </style>
Пример:
По клику заменить каждый параграф jQuery div объектом, который уже существует в DOM структуре. Учтите, функция не копирует объект, функция перемещает его на место параграфа.
"jQuery"
$("p").click(function () {
$(this).replaceWith($("div"));
});
"HTML"
<p>Hello</p> <p>cruel</p> <p>World</p> <div>Replaced!</div>
"CSS"
div { border:2px solid blue; color:red; margin:3px; }
p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function () { $(this).replaceWith($("div")); }); }); </script> </head> <body class="iframe"> <p>Hello</p> <p>cruel</p> <p>World</p> <div>Replaced!</div> </body> </html> <style> div { border:2px solid blue; color:red; margin:3px; } p { border:2px solid red; color:blue; margin:3px; cursor:pointer; } </style>
Пример:
По событию click заменить объектом jQuery, содержащим элемент div, параграфы на странице. Данный элемент не копируется, а только перемещается в структуре DOM и заменят параграф.
"jQuery"
$("p").click(function () {
$(this).replaceWith($("div"));
});
"HTML"
<p>First</p> <p>Second</p>
"CSS"
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function () { $(this).replaceWith($("div")); }); }); </script> </head> <body class="iframe"> <p>First</p> <p>Second</p> </body> </html> <style> div { border: 2px solid blue; } p { background:yellow; margin:4px; } </style>
Версия jQuery 1.4.2
Документ создан 2010-08-21