Как сделать вывод div внутри другого div?

Question

[Сергей]

Дня доброго!
Достался в наследство сайт, там есть следующий код:

<div class="teams_block">
	<?php
	foreach ($humans as $human){
		?>
			<div class="team_element" data-id='<?= $human->id ?>'>
				<div class="round_block">
					<img src="/images/<?= $human->image ?>" />
				</div>
				<div class="title"><?= $human->name ?></div>
				<div class="desc"><?= $human->office ?></div>
				<img class="team_arrow" width="61" height="24" src="/img/team_arrow.png" />
				<div class="lastdiv"></div>
				<script type="text/javascript">
	$(document).ready(function(){
		$('body').on('click', '.team_element', function(){
			$('.team_description').remove();
			$(this).parent().after('<div class="team_description"><center><img src="/img/spinner_32.gif"></center></div>');
			$('.team_description').load('/command/humandescription?id='+$(this).data('id'), function(){
				$(this).css('display','block');
			});
			$('.team_element').removeClass('active');
			$('.round_block').removeClass('active');
			$(this).addClass('active');
			$(this).find('.round_block').addClass('active');
		});
	});
</script>
			</div>
		<?php
	}
	?>
</div>

Происходит следующее: при нажатии на любой блок с классом "team_element" под последним блоком появляется новый контейнер "team_description".



Вопрос в следующем: как сделать так, чтобы "team_description" нужного мне "team_element" открывался внутри этого "team_element" после "lastdiv"?

Answer 1

[Kovalsky]

Кстати если я правильно понял данный кусок php, у вас этот js выполняется столько раз, сколько у вас элементов в массиве $humans. Это же не дело, надо js вынести, если не в отдельный .js, то хотя бы из foreach. И зачем вам вообще нужен элемент lastdiv? Мне кажется его можно смело исключить. Получится как-то так:

<div class="teams_block">
<script type="text/javascript">
$(document).ready(function(){
	var team_elements = $('.team_element'), 
		round_blocks = $('.round_block');

	$('.team_element').on('click', function(){
		var self = $(this), 
			team_description = $('<div class="team_description"><center><img src="/img/spinner_32.gif"></center></div>');
		self.find('.team_description').remove();
		self.append(team_description);
		team_description.load('/command/humandescription?id='+self.data('id'), function(){
			$(this).css('display','block');
		});
		team_elements.removeClass('active');
		round_blocks.removeClass('active');
		self.addClass('active');
		self.find('.round_block').addClass('active');
	});
});
</script>
<?php foreach ($humans as $human){ ?>
<div class="team_element" data-id='<?= $human->id ?>'>
	<div class="round_block">
		<img src="/images/<?= $human->image ?>" />
	</div>
	<div class="title"><?= $human->name ?></div>
	<div class="desc"><?= $human->office ?></div>
	<img class="team_arrow" width="61" height="24" src="/img/team_arrow.png" />
</div>
<?php } ?>
</div>

Comments

[Kovalsky]

Проверено, работает. Задавайте вопросы, если что непонятно.

[Сергей]

Да, стало выводиться в нужном месте, спасибо (= И еще 1 сопутствующий вопрос: как сделать, чтобы при повторном нажатии тим_десоипшн скрывался?

[Kovalsky]

У вас сейчас такой алгоритм в отношении team_description:

удалить team_description;
создать новый team_description;

А вы хотите:

если (team_description существует), то {
    скрыть team_description;
} иначе {
    создать новый team_description;
}

Я правильно вас понял?

[Сергей]

Ага. Сейчас там просто создается новый team_description для каждого team_element, а старый при этом тоже показывается test.multi-fit.ru/nasha_komanda

[Kovalsky]

Для начала, у вас очень странный алгоритм - у вас зачем-то динамически обновляется контент, который абсолютно точно не поменяется за время просмотра)

Я никого не критикую и верю, что такому странному подходу есть объяснение, но все же если бы это был мой сайт, я бы не ajax'ом тянул описание каждого блока, а в этом же шаблоне выводил весь нужный контент. Мне кажется это логичным.

Старые стили для элементов .team_arrow, .team_description и .round_blocks я бы полностью заместил этими:

...
.team_element .team_arrow {
  display: none;
  position: relative;
  z-index: 2;
  left: calc(50% - 30.5px);
}
.team_description {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 12px -7px #000000;
  width: 100%;
  padding: 20px;
  font-size: 14px;
  color: #333333;
  margin: 0 0 20px;
  z-index: 1;
  position: relative;
  left: -20px;
  display: none;
}
.team_element.active .round_block, .round_block:hover {
  border: 5px solid #c8dc3d;
  border-radius: 115px;
  display: block;
  height: 220px;
  overflow: hidden;
  width: 220px;
  cursor: pointer;
}
.team_element.active .team_arrow,
.team_element.active .team_description {
  display: block;
}
...

А шаблон был бы такой:

<div class="teams_block">
  <script type="text/javascript">
  $(document).ready(function(){
    var team_elements = $('.team_element');

    $('.team_element').on('click', function(){
      team_elements.removeClass('active');
      $( this ).addClass('active');
    });
  });
  </script>
  <?php foreach ($humans as $human){ ?> 
    <div class="team_element" data-id='<?= $human->id ?>'>
      <div class="round_block">
        <img src="/images/<?= $human->image ?>" />
      </div>
      <div class="title"><?= $human->name ?></div>
      <div class="desc"><?= $human->office ?></div>
      <img class="team_arrow" width="61" height="24" src="/img/team_arrow.png" />
      <div class="team_description"><?= $human->description ?></div>  
    </div>
  <?php } ?>
</div>

Чтобы такое сработало, в объекты массива $humans надо добавить еще и description. Т.к. я не имею возможности видеть остальные .php, это остается за вами)

Как видите, в моем варианте шаблона скрипт почти не занимает места, потому что наша маленькая архитектура стала намного более логичной, куча бессмысленных действий из нее выкинуто. Вообще можно было бы js полностью исключить и делать то же самое используя элементы <a> и :focus для них. Но все же существующий вариант более надежен в плане совместимости, хотя бы в отношении планшетиков.

Я хотел также написать решение на основе старого корявого шаблона, но придумывать рациональную реализацию нерационального алгоритма было настолько грустно, что я бросил, извините.

[Сергей]

Ого (= Спасибо огромнейшее! Испробую сегодня (=