jQuery 如何 find/select 多个 nth-childs

Question

我想克隆“#”和 "Name" 列并将它们附加到 table 之外的某个 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

Your way of giving multiple :nth-child selector in find() was wrong.

试试这个：-

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

jQuery 如何 find/select 多个 nth-childs

jQuery how to find/select multiple nth-childs

jquery

clone

html-table