jQuery parent.sibling logic

本文关键字：logic sibling parent jQuery 更新时间：2023-09-26

我正在尝试单击一个项目，并让该项目跳转到下一列。截至目前，当我单击该项目时，该项目会溢出到每隔一列。

这是代码。

我尝试仅将项目移动到下一列，然后移动到下一列。

'use strict';
$(document).ready(init);
function init(){
	$('#groupOne').on('click', '.item', clickHolder);
	$('#groupOne').on('click', '.item', clickCup);
}
function clickHolder(event){
	$('.selected').appendTo($(this));
	$('.selected').removeClass('.selected');
}
function clickCup(){
	var $this = $(this);
		$this.addClass('.selected'); 
	var $sibling = $this.parents().siblings();
	var $detached = $this.detach();	
		$sibling.append($detached);	
}

	<div class="topRow">
		<input type="text">
		<input type="number">
		<button>Add</button>
	</div>
	<table id="groupOne">
		<tr>
			<th>Item</th>
			<th>Price</th>
		</tr>
		<tr class="item">
			<td>Banana</td>
			<td>14.99</td>
		</tr>
		<tr class="item">
			<td>Apple</td>
			<td>5.99</td>
		</tr>
		<tr class="item">
			<td>Tomato</td>
			<td>8.99</td>
		</tr>
	</table>
	<table id="groupTwo"></table>
	<table id="groupThree"></table>
	<table id=id="groupFour"></table>
	<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
	<script src="main.js"></script>

我像这样修复它。不确定你想要什么，但这可能是一个线索？

$(".item").click(function() {
  $(this).parents("table").append($(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topRow">
  <input type="text">
  <input type="number">
  <button>Add</button>
</div>
<table id="groupOne">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr class="item">
    <td>Banana</td>
    <td>14.99</td>
  </tr>
  <tr class="item">
    <td>Apple</td>
    <td>5.99</td>
  </tr>
  <tr class="item">
    <td>Tomato</td>
    <td>8.99</td>
  </tr>
</table>
<table id="groupTwo"></table>
<table id="groupThree"></table>
<table id="groupFour"></table>

这是向上/向下移动项目行onclick的代码。

'use strict';
$(document).ready(init);
function init(){
  $('#groupOne').on('click', '.item', clickCup);
}
function clickCup(){
  // Use this to move the row down	
  $(this).insertAfter($(this).next());
  
  // Use this to move the row down	
  //$(this).insertBefore($(this).prev());
  
}

<div class="topRow">
		<input type="text">
		<input type="number">
		<button>Add</button>
	</div>
	<table id="groupOne">
      <thead>
		<tr>
			<th>Item</th>
			<th>Price</th>
		</tr>
     </thead>
     <tbody>
		<tr class="item">
			<td>Banana</td>
			<td>14.99</td>
		</tr>
		<tr class="item">
			<td>Apple</td>
			<td>5.99</td>
		</tr>
		<tr class="item">
			<td>Tomato</td>
			<td>8.99</td>
		</tr>
    </tbody>
	</table>
	<table id="groupTwo"></table>
	<table id="groupThree"></table>
	<table id=id="groupFour"></table>
	<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
	<script src="main.js"></script>