Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.01.2019, 15:58
Новичок на форуме
Отправить личное сообщение для DrewSherwood Посмотреть профиль Найти все сообщения от DrewSherwood
 
Регистрация: 23.01.2019
Сообщений: 8

Поменять содержимое элементов по одному ID
Не могу понять, как сделать следующее: нужно поменять содержимое двух контейнеров между собой, чтобы получилось из 1 2 3 4 → 2 1 4 3. Буду благодарен помощи

<div class="start" id="firstID">
  <p>One</p>
</div>
<div class="end" id="firstID">
  <p>Two</p>
</div>
<div class="start" id="secondID">
  <p>Three</p>
</div>
<div class="end" id="secondID">
  <p>Four</p>
</div>


Когда пишу скрипт, то получается поменять между собой только первые два элемента:

var start = $('.start').html();
var end = $('.end').html();
$('.start').html(end);
$('.end').html(start);
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2019, 16:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,640

DrewSherwood,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var end = $(".end");
    $(".start").html(function(index, html) {
        var el = end.eq(index);
        $(this).html(el.html());
        el.html(html)
    });
});
  </script>
</head>

<body>
<div class="start" id="firstID">
  <p>One</p>
</div>
<div class="end" id="firstID">
  <p>Two</p>
</div>
<div class="start" id="secondID">
  <p>Three</p>
</div>
<div class="end" id="secondID">
  <p>Four</p>
</div>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2019, 16:27
Новичок на форуме
Отправить личное сообщение для DrewSherwood Посмотреть профиль Найти все сообщения от DrewSherwood
 
Регистрация: 23.01.2019
Сообщений: 8

Большое спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2019, 16:46
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 718

Если вам нужно именно поменять местами, то можно так.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>

<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
		$(function() {
			var jQueryEnd = $(".end");

			$(".start").before(function(index) {
				var jQueryElement = jQueryEnd.eq(index);
				
				$(this).removeClass("start").addClass("end");
				jQueryElement.removeClass("end").addClass("start");

				return jQueryElement;
			});
		});
	</script>

	<div class="start" data-id="firstID">
		<p>One</p>
	</div>
	<div class="end" data-id="firstID">
		<p>Two</p>
	</div>
	<div class="start" data-id="secondID">
		<p>Three</p>
	</div>
	<div class="end" data-id="secondID">
		<p>Four</p>
	</div>

</body>
</html>


P. S. Два одинаковых id бессмысленны, может data-id?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как с помощью js поменять содержимое content у псевдоэлементов before и after? grifangel Общие вопросы Javascript 3 17.10.2013 20:11
Не отображается содержимое последующих вкладок APdesign Общие вопросы Javascript 4 17.07.2013 08:54
Как поменять последовательность элементов? AngeIa jQuery 2 11.05.2011 16:57
Изменить содержимое элементов, Или удалить сами улементы muratti Events/DOM/Window 7 01.12.2010 07:38
как поменять цвет элементов div с помощью ajax? uspehovna AJAX и COMET 12 20.08.2010 16:21