Поменять содержимое элементов по одному 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);
|
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>
|
Большое спасибо!
|
Если вам нужно именно поменять местами, то можно так.
<!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? |
| Часовой пояс GMT +3, время: 16:17. |