Форум

DrewSherwood · #1 (**permalink**) 23.01.2019, 16:58

Не могу понять, как сделать следующее: нужно поменять содержимое двух контейнеров между собой, чтобы получилось из 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, 17:15

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>

DrewSherwood · #3 (**permalink**) 23.01.2019, 17:27

Большое спасибо!

Malleys · #4 (**permalink**) 23.01.2019, 17:46

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

<!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?

Форум

Справочник

Discord чат

Курсы javascript