jQuery如何找到/選擇多個孩子

Question

我想克隆「＃」和「名稱」列，並將它們附加在表格外的某個div中（同時保持與thead和tbody完全相同的結構）。

No Name   Data1   Data2   Data3 
1 John Doe  Some data  Some data  Some data 
2 John Doe  Some data  Some data  Some data 
3 John Doe  Some data  Some data  Some data 

<table> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th>Name</th> 
     <th>Data1</th> 
     <th>Data2</th> 
     <th>Data3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>John Doe</td> 
     <td>Some data</td> 
     <td>Some data</td> 
     <td>Some data</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>John Doe</td> 
     <td>Some data</td> 
     <td>Some data</td> 
     <td>Some data</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>John Doe</td> 
     <td>Some data</td> 
     <td>Some data</td> 
     <td>Some data</td> 
    </tr> 
    </tbody> 
</table> 

我想使它看起來像這樣：

<table> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th>Name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>John Doe</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>John Doe</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>John Doe</td> 
    </tr> 
    </tbody> 
</table> 

我當前的代碼似乎並不工作（我只管理第一列），但我可以讓它的工作超過第一列

$('table').clone().prependTo('.panel').find('th:not(:nth-child(1)), th:not(:nth-child(2)), td:not(:nth-child(1)), td:not(:nth-child(2))').remove(); 

Answer 1

因爲我能理解你正在嘗試做，你可以試試這個解決方案..！

$('table').clone().prependTo('.panel').find('th:not(:nth-child(-n+2)), td:not(:nth-child(-n+2))').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>Name</th> 
 
     <th>Data1</th> 
 
     <th>Data2</th> 
 
     <th>Data3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>John Doe</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br /><br /> 
 

 
<div class="panel"></div>

Answer 2

你的find()給多個:nth-child選擇的方式是錯誤的 。

試試這個： -

$(function(){ 
 

 
    $('.panel').html($('#tab').clone()); 
 
    
 
    $('.panel').find('th:not(:nth-child(1),:nth-child(2)), td:not(:nth-child(1),:nth-child(2))').remove(); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tab"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>Name</th> 
 
     <th>Data1</th> 
 
     <th>Data2</th> 
 
     <th>Data3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>John Doe</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>John Doe</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>John Doe</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
I want to make it look like this: 
 

 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>John Doe</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>John Doe</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>John Doe</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<strong> 
 
<br><br> 
 
Generated table here:- 
 
</strong> 
 
<div class="panel"> 
 
</div>