Вторая версия данного метода - .wrapInner( wrappingFunction ) позволяет определить функцию обратного вызова. Данная функция будет вызвана для каждого подходящего элемента единожды. Данная функция должна возвращать элемент структуры DOM, jQuery объект, отрезок HTML в который оборачивается содержимое ссылающегося элемента.
Пример:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
Hello { border: 2px solid blue; }
Goodbye { background:yellow; margin:4px; }
<!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(){ $('.inner').wrapInner(function() { return '<div class="' + this.nodeValue + '" />'; }); }); </script> </head> <body class="iframe"> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> </body> </html> <style> Hello { border: 2px solid blue; } Goodbye { background:yellow; margin:4px; } </style>
Пример:
<p>Hello</p> <p>cruel</p> <p>World</p>
p { background:#9f9; }
<!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").wrapInner(document.createElement("b")); }); </script> </head> <body class="iframe"> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html> <style> p { background:#9f9; } </style>
Пример:
<p>Hello</p> <p>cruel</p> <p>World</p>
p { background:#9f9; }
.red { color:red; }
<!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").wrapInner($("<span class='red'></span>")); }); </script> </head> <body class="iframe"> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html> <style> p { background:#9f9; } .red { color:red; } </style>