Javascript 如何将列表项移到第一个位置，然后再移回第一个位置？

我正在尝试使此代码适应我的li列表。 [ 我画了一些东西，说明了确切的逻辑

• 点击元素先走

• 单击的第二个元素将首先显示，但剪辑的预览将最后显示

代码如下：

$('ul li').each(function() {

    var $this = $(this).data({
            position: $(this).index()
        }),
        $table = $this.closest('ul'),
        $input = $this.find('input');

    $input.bind('click', function(e) {
        var $first = $table.find('li:first'),
            position;

        if ($(this).is(':checked')) {
            position = $first.data('position');
            $table.find('li input').not($(this)).removeAttr('checked');
            if (position != 0) $first.insertAfter($table.find('li').eq(position));
            $this.prependTo($table);
        } else if ($this.data('position') != 0) {
            position = $this.data('position');
            $this.insertAfter($table.find('li').eq(position));
        }
    });

});

下面的代码适用于表，但我想在ul li上实现这一点。 有没有办法使复选框输入成为li或锚定标记

---

在JSFIDLE代码中进行一些调整是这样工作的：

请参见此处的示例：

请参见上面的de HTML代码：

<ul>
    <li>
        <input type="checkbox" />
        1
    </li>
    <li>
        <input type="checkbox" />
        3
    </li>
    <li>
        <input type="checkbox" />
        A
    </li>
    <li>
        <input type="checkbox" />
        B
    </li>
    <li>
        <input type="checkbox" />
        C
    </li>
</ul>

请注意，只需更改相应的标记：

• 表格至ul
• tr至li

---

如果您不想使用复选框，但要使用简单的标记，请参见以下示例：

请参阅JSFiddler中的：

我没有重命名变量，因此很容易理解重要的调整

使用

goToLast

变量定义行为：发送到最后一个位置或更改位置（传统行为）

jQuery：

var goToLast = true;

$('.item').each(function() {

  var $this = $(this).data({
      position: $(this).index()
    }),
    $table = $this.closest('.container'),
    $input = $this;

  $input.bind('click', function(e) {
    $input.toggleClass('selected');

    var $first = $table.find('.item:first'),
      position;

    if ($(this).hasClass('selected')) {
      position = !goToLast ? $first.data('position') : $table.children().length - 1;
      $table.find('.item').not($(this)).removeClass('selected');
      if (position != 0) $first.insertAfter($table.find('.item').eq(position));
      $this.prependTo($table);
    } else if ($this.data('position') != 0) {
      position = $this.data('position');
      $this.insertAfter($table.find('.item').eq(position));
    }
  });

});

HTML:

---

根据您的示例，我假设您对html源代码没有控制权，并且希望动态地将表更改为列表

下面是一个基于您的代码和原始示例html的示例（注释）

直截了当地说：

//要分析和替换的唯一表选择器：
变量$targetTable=$（“表”）；
//这是将存储列表项的目标新列表：
变量$sudoul=$（“
”）；
//切换所有行并创建列表项：
$targetTable.find（'tr'）。每个（函数（）{
$sudoul.append（$（“
”+$（this.text（）+”
））
//这会将单击事件绑定到存储在$sudoul中的新LI
.bind（“单击”，函数（）{
//如果单击第一个元素，则避免并不更改任何内容：
if（$（this）.is（':first child'）返回；
var$container=$（this）.closest（“ul”）；
var$this=$（this）；//要向上移动的单击项。
var$first=$container.find（“li”）.eq（0）；//要替换的第一个列表项。
//首先将项目移动到列表的开头：
$container.prepend（$this.data（“alreadyclicked”，true））；
//检查第一个元素是否已移动，并将其附加到列表的末尾
if（$first.data（“alreadyclicked”）$container.append（$first）；
})
.data（{alreadyclicked:false}）//单击元素时，此标志设置为true
);
});
//用新创建的列表替换该表：
$targetTable.replaceWith（$sudoul）；

1.
3.
A.
B
C

您是否删除复选框？或者在

中使用复选框？或者？您的逻辑完全奇怪。您能否解释一下，如果：首先单击“A”，然后单击“1”，会发生什么情况.ThanksThanks，如果没有checks输入标记，是否可以实现它？可能是锚标记？是的。我会写其他答案。如果你注意到我上面的图像，如果单击C，C将成为第一个。然后如果我单击3 C，C将成为最后一个。你不想改变位置，但总是转到最后一个位置？感谢你的努力，就快到了。除非ck C，C成为第一个。然后，如果我单击3 C，它将成为最后一个。在上面的图像上，这很清楚。这有意义吗？即使你正在说话，它也是这样实现的。请看：嗨，你能再次检查切换吗？看起来当我单击相同的按钮时，它会移动位置。它应该只是切换。我已经为你更新了图像。如果你能帮忙，请告诉我。Obrigado dude！非常好的帮助谢谢，如果单击C，C将成为第一个。然后，如果我单击3 C，C将成为最后一个。上面的图像有意义吗？我在手机上，没有演示，我无法测试这个答案。@user173420我看不出有什么问题，正如你所描述的，请看：

var goToLast = true;

$('.item').each(function() {

  var $this = $(this).data({
      position: $(this).index()
    }),
    $table = $this.closest('.container'),
    $input = $this;

  $input.bind('click', function(e) {
    $input.toggleClass('selected');

    var $first = $table.find('.item:first'),
      position;

    if ($(this).hasClass('selected')) {
      position = !goToLast ? $first.data('position') : $table.children().length - 1;
      $table.find('.item').not($(this)).removeClass('selected');
      if (position != 0) $first.insertAfter($table.find('.item').eq(position));
      $this.prependTo($table);
    } else if ($this.data('position') != 0) {
      position = $this.data('position');
      $this.insertAfter($table.find('.item').eq(position));
    }
  });

});

<div class="container">
  <a href="#" class="item">1</a>
  <a href="#" class="item">3</a>
  <a href="#" class="item">A</a>
  <a href="#" class="item">B</a>
  <a href="#" class="item">C</a>
</div>

a.item {
  display: block;
  background-color: silver;
  border: 1px solid gray;
  padding: 10px;
  margin: 10px;
}

a.item.selected {
  background-color: green;
}