Форум

Wreck-It-Ralph · #1 (**permalink**) 12.03.2017, 21:47

Объясню поподробнее в чем проблема. Есть два текста, состоящих из нескольких строк. Нужно каким-то образом по клику совместить их в один таким образом, чтобы строки разных текстов чередовались.

Пробовал простым перемещением, но выходило, что полный текст вставлялся после каждой строки.

<div>
  <button id="two">2</button>
  <button id="one">1</button>
</div>

<div class="text">
  <div class="first">А</div>
  <div class="first">Б</div>
  <div class="first">В</div>
  <div class="first">Г</div>
</div>

<div class="text_2">
  <div class="second">1</div>
  <div class="second">2</div>
  <div class="second">3</div>
  <div class="second">4</div>
</div>

$(function(){
  $('#one').click(function() {
    $('.second').appendTo($('.first'));
  });
});

Желаемый результат:

А
1
Б
2
В
3
Г
4

Есть у кого идеи? Может вообще есть другой путь решения проблемы? Заранее спасибо!

рони · #2 (**permalink**) 12.03.2017, 22:16

Сообщение от Wreck-It-Ralph

Желаемый результат:

можно в html?

Wreck-It-Ralph · #3 (**permalink**) 12.03.2017, 22:32

<div class="text">
  <div class="first">А</div>
  <div class="second">1</div>
  <div class="first">Б</div>
  <div class="second">2</div>
  <div class="first">В</div>
  <div class="second">3</div>
  <div class="first">Г</div>
  <div class="second">4</div>
</div>

<div class="text_2">
</div>

В идеале как-то так, и чтобы это можно было в обратное состояние вернуть

рони · #4 (**permalink**) 12.03.2017, 22:52

Wreck-It-Ralph,

<!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 sec = $('.second'), fst = $('.first');
  $('#one').click(function() {
   fst.after(function(i) {
   return sec[i]
    })
  });
  $('#two').click(function() {
   sec.appendTo(".text_2")
  });
});

  </script>
</head>

<body>
<div>
  <button id="two">2</button>
  <button id="one">1</button>
</div>

<div class="text">
  <div class="first">А</div>
  <div class="first">Б</div>
  <div class="first">В</div>
  <div class="first">Г</div>
</div>

<div class="text_2">
  <div class="second">1</div>
  <div class="second">2</div>
  <div class="second">3</div>
  <div class="second">4</div>
</div>

</body>
</html>

Wreck-It-Ralph · #5 (**permalink**) 13.03.2017, 00:32

Спасибо огромное!

Форум

Справочник

Discord чат

Курсы javascript