Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Перемещение элементов (https://javascript.ru/forum/jquery/73759-peremeshhenie-ehlementov.html)

face2005 12.05.2018 16:07
Перемещение элементов
 
Добрый день! подскажите как переместить элементы в районе своего родителя?
$('.sepSt .waper-catalog-row-col-4 span').appendTo($('.sepSt .waper-catalog-row-col-3'));


у меня собирает все .sepSt .waper-catalog-row-col-4 span и запихивает в .sepSt .waper-catalog-row-col-3

подскажите плиз..

laimas 12.05.2018 16:11
$('.sepSt .waper-catalog-row-col-4 span').appendTo($('.sepSt .waper-catalog-row-col-3')); - красное лишнее.

Цитата:
Сообщение от face2005
собирает все .sepSt .waper-catalog-row-col-4 span и запихивает в .sepSt .waper-catalog-row-col-3
А что надо?

face2005 12.05.2018 16:20 
<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            <span>другой text</span>
    </div>
</div>

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            <span>другой text1</span>
    </div>
</div>

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            <span>другой text2</span>
    </div>
</div>


нужно что бы срабатывало в родителе , т.е. не собирало все .sepSt .waper-catalog-row-col-4 span а по одному каждый в своем отсеке...

j0hnik 12.05.2018 16:25
face2005,
нужна разметка как есть до манипуляций, и что должно получиться после.

face2005 12.05.2018 16:31
должно вот так получиться 
<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
            <span>другой text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            
    </div>
</div>

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
            <span>другой text1</span>
    </div>
    <div class="waper-catalog-row-col-4">
            
    </div>
</div>

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
            <span>другой text2</span>
    </div>
    <div class="waper-catalog-row-col-4">
            
    </div>
</div>

face2005 12.05.2018 16:32
а получается вот так:
<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
            <span>другой text</span>
            <span>другой text1</span>
            <span>другой text2</span>
    </div>
    <div class="waper-catalog-row-col-4">
            
    </div>
</div>

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>            
    </div>
    <div class="waper-catalog-row-col-4">
            
    </div>
</div>

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            
    </div>
</div>

laimas 12.05.2018 16:38
Цитата:
Сообщение от face2005
должно вот так получиться
Из чего?

face2005 12.05.2018 16:48
я выше показывал, дублирую:

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            <span>другой text</span>
    </div>
</div>

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            <span>другой text1</span>
    </div>
</div>

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            <span>другой text2</span>
    </div>
</div>

j0hnik 12.05.2018 16:50 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            <span>другой text</span>
    </div>
</div>

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            <span>другой text1</span>
    </div>
</div>

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            <span>другой text2</span>
    </div>
</div>

	<script>
		$('.waper-catalog-row-col-3').each(function(){
			$(this).append($(this).siblings('.waper-catalog-row-col-4').children('span'));
		});

	</script>
</body>
</html>


так?

laimas 12.05.2018 16:52
Цитата:
Сообщение от face2005
я выше показывал
Выше и то что дублировано по вашему же, это "должно вот так получиться". А если "должно вот так получиться" тоже самое что и исходное состояние, то зачем же что-то переносить?

PS. не на ту пару глядел )

laimas 12.05.2018 16:58
$(this).append($(this).siblings('.waper-catalog-row-col-4').children('span'));

$(this).siblings('.waper-catalog-row-col-4').children('span').appendTo(this);

face2005 12.05.2018 17:03
Спасибо большое!

j0hnik 12.05.2018 17:12
laimas,
:no: ничем не лучше

рони 12.05.2018 17:18
face2005,
<!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() {
$( ".sepSt" ).each(function(i, el) {
    $(".waper-catalog-row-col-4 span",el).appendTo($(".waper-catalog-row-col-3", el))
	});
});
  </script>
</head>

<body>
<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            <span>другой text</span>
    </div>
</div>

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            <span>другой text1</span>
    </div>
</div>

<div class="sepSt">
    <div class="waper-catalog-row-col-3">
            <span>text</span>
    </div>
    <div class="waper-catalog-row-col-4">
            <span>другой text2</span>
    </div>
</div>

</body>
</html>

j0hnik 12.05.2018 17:22
appendTo более тормозной чем append

laimas 12.05.2018 17:25
Цитата:
Сообщение от j0hnik
ничем не лучше
Один хрен, просто дважды получать $(this)...

Цитата:
Сообщение от j0hnik
appendTo более тормозной чем append
Стоит ли париться из-за копеечного выигрыша? Это уже паранойя. :)


Часовой пояс GMT +3, время: 09:41.