与JQuery交换

Question

我有这个

<td id="mytd">
    <tr>
        <span>1</span>
    </tr>
    <tr>
        <span>2</span>
    </tr>
    <tr>
        <span>3</span>
    </tr>
    <tr>
        <span>4</span>
    </tr>
</td>

我想要这个改变

<td id="mytd">
    <tr>
        <span>1</span>
    </tr>
    <tr>
        <span>3</span>
    </tr>
    <tr>
        <span>2</span>
    </tr>
    <tr>
        <span>4</span>
    </tr>
</td>

因此，我想将选举范围扩大2到3倍。 我能做什么？ 我不想按字母顺序或asc或desc，我想要自定义排序，并且只跨一个范围

我有这个

$('[span="3"]'.closest('tr')).before($('[span="2"]'.closest('tr')));

但是告诉我一个错误

  

对象不接受“最近”属性或方法

Answer 1

您可以使用任何可以在某处插入元素的东西。例如insertAfter。您可以使用span选择器，按索引选择:eq()。然后简单地一个接一个地放置。

$('span:eq(2)').insertAfter('span:eq(0)');

span {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>

您甚至可以使用insertBefore。甚至其他html结构也是如此。

$('tr:eq(2)').insertBefore('tr:eq(1)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <span>1</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>2</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>3</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>4</span>
    </td>
  </tr>
</table>

我认为这会带您前进...

Answer 2

您可以使用各种jquery方法移动元素，在这种情况下，insertAfter可以解决您的问题：

$("#mydiv span:eq(2)").insertAfter("#mydiv span:eq(0)")

（您可能需要insertBefore才能将其移至第一项）

如果第一部分（$("#mydiv span:eq(2)")）中的元素已经存在，则将在DOM中对其进行移动。如果是新的，它将被添加，例如：

$("<span>9</span>").insertAfter("#mydiv span:eq(0)");

将插入一个新的跨度，而第一个代码将移动该跨度。

// 0 based
$("#mydiv span:eq(2)").insertAfter("#mydiv span:eq(0)")

span { display:block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>

更新：鉴于OP（各种）编辑中HTML布局的实质性变化，这将需要对选择器进行一些修改，但是概念保持不变。