Форум

Bubek · #1 (**permalink**) 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 · #2 (**permalink**) 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 · #3 (**permalink**) 20.11.2013, 10:33

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

Форум

Справочник

Discord чат

Курсы javascript