Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Выборка по классу тега и помещение в див (https://javascript.ru/forum/misc/43044-vyborka-po-klassu-tega-i-pomeshhenie-v-div.html)

Bubek 19.11.2013 17:48

Выборка по классу тега и помещение в див
 
Здравствуйте,
есть динамически создаваемый контекст, в которым теги одного класса нужно обернуть дивом:
<p class="volt220">Hello</p>
  <p class="volt220">cruel</p>
  <p class="volt240">Hello</p>
  <p class="volt240">cruel</p>
  <p class="volt250">World</p>
  <p class="volt260">World</p>
  <p class="volt220">World</p>
  <p class="volt260">World</p>
  <p class="volt260">World</p>

а нужно:
<div>
  <p class="volt220">Hello</p>
  <p class="volt220">cruel</p>
  <p class="volt220">World</p>
</div>
<div>
  <p class="volt240">Hello</p>
  <p class="volt240">cruel</p>
</div>
<div>
  <p class="volt250">World</p>
</div>
<div>
  <p class="volt260">World</p>
  <p class="volt260">World</p>
  <p class="volt260">World</p>
</div>

в названии класса неизменное только первая часть volt
Класс я выбрал, а обернуть одинаковые классы в один див не получается.
вот мой код (jquery):
var items = $("p[class^='volt']");
var arr = jQuery.makeArray(items);
   for(var i in arr) {
	 if (!arr.hasOwnProperty(i)) continue;
     $(arr[i]).wrapAll("<div class='group'></div>");
}

Подскажите как можно сделать такое.
Спасибо.

ksa 19.11.2013 18:48

Цитата:

Сообщение от Bubek
как можно сделать такое

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-->
<style type="text/css">
div {
	border: 1px solid;
}
</style>
<script type="text/javascript">
$(function (){
	var o=$('body > p[class^="volt"]');
	while (o.length>0) {
		$('.'+o.get(0).className).wrapAll('<div></div>');
		o=$('body > p[class^="volt"]');
	};
});
</script>
</head>
<body>
<p class="volt220">Hello</p>
<p class="volt220">cruel</p>
<p class="volt240">Hello</p>
<p class="volt240">cruel</p>
<p class="volt250">World</p>
<p class="volt260">World</p>
<p class="volt220">World</p>
<p class="volt260">World</p>
<p class="volt260">World</p>
</body>
</html>

Bubek 20.11.2013 10:33

Спасибо, все работает.


Часовой пояс GMT +3, время: 07:11.