jQuery parent.sibling逻辑

Question

我试图点击一个项目，并让该项目跳转到下一列。截至目前，当我点击该项目时，该项目溢出，到其他列。

这是代码。

我想只将项目移动到下一列，然后移到下一列。

'use strict'; 
 

 
$(document).ready(init); 
 

 
function init(){ 
 
\t $('#groupOne').on('click', '.item', clickHolder); 
 
\t $('#groupOne').on('click', '.item', clickCup); 
 
} 
 

 
function clickHolder(event){ 
 
\t $('.selected').appendTo($(this)); 
 
\t $('.selected').removeClass('.selected'); 
 
} 
 

 
function clickCup(){ 
 
\t var $this = $(this); 
 
\t \t $this.addClass('.selected'); 
 
\t var $sibling = $this.parents().siblings(); 
 
\t var $detached = $this.detach(); \t 
 
\t \t $sibling.append($detached); \t 
 
}

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

Answer 1

我固定它这样。不完全确定你想要什么，但这可能是一个主角？

$(".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>

Answer 2

这里是一个向上/向下移动的项目排onclick它的代码。

'use strict'; 
 

 
$(document).ready(init); 
 

 
function init(){ 
 
    $('#groupOne').on('click', '.item', clickCup); 
 
} 
 

 
function clickCup(){ 
 
    // Use this to move the row down \t 
 
    $(this).insertAfter($(this).next()); 
 
    
 
    // Use this to move the row down \t 
 
    //$(this).insertBefore($(this).prev()); 
 
    
 
}

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