Верно ли переместил элемент при изменении размеров окна?

Question

[chupok]

Есть некий элемент (address), расположенный внутри main. При изменении ширины браузера (имеется точное значение) элемент необходимо перенести в header.

<header>
</header>

<main>
	<address></address>
</main>

Задачу решил просто, подставив условия: если ширина окна больше 640px, переносим address в header; если меньше - оставляем (точнее: переносим) в main. Единственное, что смущает, так это именно второе условие, где перенос также осуществляется, хотя, по сути, элемент и так вложен. С другой стороны - структура ведь изменилась... Если второе условие убрать, то address возвращаться "на место" не будет.

$(document).ready(
	function(){
		$(window).resize(function(){
			if($(window).width()>640){
				$("header").append($("address"))
			}
			if($(window).width()<640){
				$("main").append($("address"))
			}
		}).resize();
	}
);

Верно ли решил задачу или есть более корректный выход?

Answer 1

[Евгений Петров]

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

$(function(){
	var header = $('header'),
		main = $('main'),
		address = $('address');

	$(window).on('resize', function () {
		if ($(this).width() > 640) {
			if (!address.closest(header).length) {
				address.appendTo(header);
				console.log('Moving to header');
			}
		} else {
			if (!address.closest(main).length) {
				address.appendTo(main);
				console.log('Moving to main');
			}
		}
	}).resize();
});

Пы.Сы. Надеюсь, что в реальности у header и address есть опознавательные знаки:)

Comments

[chupok]

О! Спасибо большое за ответ.) Все опознавательные знаки имеются.)