Форум

Mekuya · #1 (**permalink**) 07.10.2015, 19:06

Мастера-джедай, пожалуйста, подскажите метод.
Посредством jQuery необходимо <h2 class="item-title"> перенести во внутрь в <div id="contPanel">. Но перенести именно так чтобы был перенесён только дочерний элемент из одного родителя в другой дочерний элемент.

<div class="blog-featured">
	
	<div class="items-row row-0">
	
		<div class="item">
			<h2 class="item-title A1"></h2>
			<div id="contPanel"></div>
		</div>
		
		<div class="item">
			<h2 class="item-title A1"></h2>
			<div id="contPanel"></div>
		</div>
		
	</div>

	<div class="items-row row-1">
	
		<div class="item">
			<h2 class="item-title A3"></h2>
			<div id="contPanel"></div>
		</div>
		
		<div class="item">
			<h2 class="item-title A4"></h2>
			<div id="contPanel"></div>
		</div>
		
	</div>
	
</div>

Мне нужно чтобы получилось вот так:

<div class="blog-featured">
	
	<div class="items-row row-0">
	
		<div class="item">
			<div id="contPanel">
				<h2 class="item-title A1"></h2>
			</div>
		</div>
		
		<div class="item">
			<div id="contPanel">
				<h2 class="item-title A2"></h2>
			</div>
		</div>
		
	</div>

	<div class="items-row row-1">
	
		<div class="item">
			<div id="contPanel">
				<h2 class="item-title A3"></h2>
			</div>
		</div>
		
		<div class="item">
			<div id="contPanel">
				<h2 class="item-title A4"></h2>
			</div>
		</div>
		
	</div>
	
</div>

Но у меня выходит не так как мне нужно:

<div class="blog-featured">
	
	<div class="items-row row-0">
	
		<div class="item">
			<div id="contPanel">
				<h2 class="item-title A1"></h2>
				<h2 class="item-title A2"></h2>
				<h2 class="item-title A3"></h2>
				<h2 class="item-title A4"></h2>
			</div>
		</div>
		
		<div class="item">
			<div id="contPanel">
				<h2 class="item-title A1"></h2>
				<h2 class="item-title A2"></h2>
				<h2 class="item-title A3"></h2>
				<h2 class="item-title A4"></h2>
			</div>
		</div>
		
	</div>

	<div class="items-row row-1">
	
		<div class="item">
			<div id="contPanel">
				<h2 class="item-title A1"></h2>
				<h2 class="item-title A2"></h2>
				<h2 class="item-title A3"></h2>
				<h2 class="item-title A4"></h2>
			</div>
		</div>
		
		<div class="item">
			<div id="contPanel">
				<h2 class="item-title A1"></h2>
				<h2 class="item-title A2"></h2>
				<h2 class="item-title A3"></h2>
				<h2 class="item-title A4"></h2>
			</div>
		</div>
		
	</div>
	
</div>

рони · #2 (**permalink**) 07.10.2015, 19:22

Mekuya,
вам про id что-то известно?

Mekuya · #3 (**permalink**) 07.10.2015, 19:28

Сообщение от рони

Mekuya,
вам про id что-то известно?

Давайте без сарказма. Конечно известно. В jQuery элементы можно отбирать по тегам, по классам ну и т.д. id не единственный вариант.
Я прошу помочь с методом отбора элемента в родителе.

Если есть соображения помогите пожалуйста.

рони · #4 (**permalink**) 07.10.2015, 19:31

Сообщение от Mekuya

Конечно известно.

тогда почему id одинаковые???

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #contPanel .item-title:after{
    content: "ok!" ;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
    $(function() {
    var a = $(".item-title");
    a.each(function(i,el) {
        $(el).next().append(el)
    });
});


  </script>
</head>

<body>
<div class="blog-featured">

	<div class="items-row row-0">

		<div class="item">
			<h2 class="item-title A1"></h2>
			<div id="contPanel"></div>
		</div>

		<div class="item">
			<h2 class="item-title A2"></h2>
			<div id="contPanel"></div>
		</div>

	</div>

	<div class="items-row row-1">

		<div class="item">
			<h2 class="item-title A3"></h2>
			<div id="contPanel"></div>
		</div>

		<div class="item">
			<h2 class="item-title A4"></h2>
			<div id="contPanel"></div>
		</div>

	</div>

</div>

</body>

</html>

Mekuya · #5 (**permalink**) 07.10.2015, 19:35

вы наверно спрашиваете про <div id="contPanel"></div> это динамический элемент со статичным id. ID в моём случае id всегда должен быть таким.

Mekuya · #6 (**permalink**) 07.10.2015, 19:56

Рино, спасибо за попытку помочь. буду дальше гуглить

рони · #7 (**permalink**) 07.10.2015, 20:00

Сообщение от Mekuya

буду дальше гуглить

у вас что код из 4 сообщения не работает???

Mekuya · #8 (**permalink**) 07.10.2015, 20:11

нет(

мне нужен вот такой результат:

<div class="blog-featured">
	
	<div class="items-row row-0">
	
		<div class="item">
			<div id="contPanel">
				<h2 class="item-title A1"></h2>
			</div>
		</div>
		
		<div class="item">
			<div id="contPanel">
				<h2 class="item-title A2"></h2>
			</div>
		</div>
		
	</div>

	<div class="items-row row-1">
	
		<div class="item">
			<div id="contPanel">
				<h2 class="item-title A3"></h2>
			</div>
		</div>
		
		<div class="item">
			<div id="contPanel">
				<h2 class="item-title A4"></h2>
			</div>
		</div>
		
	</div>
	
</div>

Я прошу прощения если чего то недопониманию.

рони · #9 (**permalink**) 07.10.2015, 20:21

Сообщение от Mekuya

мне нужен вот такой результат:

именно этот результат и делает код, посмотрите в консоли

Mekuya · #10 (**permalink**) 08.10.2015, 11:51

Смог решить свой вопрос.

$(document).ready(function () {

    jQuery('.item #contPanel').each(function() {
       var vH2 = jQuery(this).siblings('h2.item-title'); // возвращает заголовок h2
       jQuery(vH2).prependTo(this);
        
    });
});

Рони, ещё раз спасибо Вам за помощь и отзывчивость!

Форум

Справочник

Discord чат

Курсы javascript