使用Jquery

Question

我制作要完成任务的“待办事项列表”。我有一些按钮可以在列表中上下移动任务。

我按下上下按钮。我唯一的问题是任务div能够在整个页面上下移动。如何让任务div只能相互上下移动？

谢谢！

这是我的代码：

$(document).ready(function(){
	
	$('.up_button').click(function(){
		$(this).parents('.task').insertBefore($(this).parents('.task').prev());
	});

	$('.down_button').click(function(){
		$(this).parents('.task').insertAfter($(this).parents('.task').next());
	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="task col-sm-12">
	<div class="col-md-6">
		 <div class="input-group">
			<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write HTML" readonly>
		</div>
	</div>
	<div class="col-md-6">
		<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
		<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
	</div>
</div>

<div class="task col-sm-12">
	<div class="col-md-6">
		 <div class="input-group">
			<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write XML" readonly>
		</div>
	</div>
	<div class="col-md-6">
		<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
		<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
	</div>
</div>

Answer 1

1st：我认为您需要在转到insertAfter或insertBefore之前定义$(this)

第二名：您可以使用.closest()

$(document).ready(function(){

    $('.up_button').click(function(){
        var ThisIt = $(this);
        $(this).closest('.task').insertBefore(ThisIt.closest('.task').prev('.task'));
    });

    $('.down_button').click(function(){
        var ThisIt = $(this);
        ThisIt.closest('.task').insertAfter(ThisIt.closest('.task').next('.task'));
    });

});

Demo Here