将项目放在列表顶部

时间：2018-10-01 11:49:18

标签： jquery html

我必须能够使用jquery操纵列表。我已经创建了一个包含元素的列表：

<ul id="lista1" class="list-group">

<li id = "1" class="list-group-item d-flex justify-content-between align-items-center">
  <p id = "elem1"> Carne </p>
  <button id = "mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
  <button id = "canc" class="badge badge-primary badge-pill">X</button>
  <button id = "top" class="badge badge-primary badge-pill">TOP</button>
</li>

</ul>

现在，我希望我可以在单击“顶部”按钮后将其带到列表的顶部。我想到过一个函数，该函数可以保存必须显示的元素，然后将其删除，然后将其重写到顶部的列表中，但是它不起作用。

$(document).ready(function() {
  $("#lista1").on('click', '#top', function() {

     $ogg = $(this).closest('li');
        $ogg.remove();

    $("#lista1").append($ogg);  

  });
});

您有什么想法吗？

5 个答案:

答案 0 :(得分：1)

首先将“顶部”按钮ID更改为class，然后使用insertBefore方法将单击的按钮li插入顶部

jQuery：

$("#lista1").on('click', '.top', function () {

        $ogg = $(this).closest('li');
        $ogg.remove();

        $($ogg).insertBefore($("#lista1 li:eq(0)"));

    });

HTML：

<ul id="lista1" class="list-group">

    <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
        <p id="elem1"> Carne </p>
        <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
        <button id="canc" class="badge badge-primary badge-pill">X</button>
        <button  class="badge badge-primary badge-pill top">TOP</button>
    </li>
    <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
        <p id="elem1"> Carne </p>
        <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
        <button id="canc" class="badge badge-primary badge-pill">X</button>
        <button class="badge badge-primary badge-pill top">TOP</button>
    </li>
    <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
        <p id="elem1"> Carne Last</p>
        <button id="mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
        <button id="canc" class="badge badge-primary badge-pill">X</button>
        <button class="badge badge-primary badge-pill top">TOP</button>
    </li>
</ul>

答案 1 :(得分：1)

要在列表顶部插入$ogg，请should使用.prepend()。 当您使用.append() $ogg时，请添加到列表末尾。

我想向您提供有关使用ID的建议，请谨慎使用html中的ID，在我的代码示例中，我将类用于绑定事件。否则，您可能会得到脚本的奇怪行为

$(document).ready(function() {
  $("#lista1").on('click', '.top', function() {

    $ogg = $(this).closest('li');
    $ogg.remove();

    $("#lista1").prepend($ogg);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="lista1" class="list-group">

  <li id="1" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem1"> Carne </p>
    <button class="badge badge-primary badge-pill mod" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button class="badge badge-primary badge-pill canc">X</button>
    <button class="badge badge-primary badge-pill top">TOP</button>
  </li>

  <li id="2" class="list-group-item d-flex justify-content-between align-items-center">
    <p id="elem2"> Carne 2</p>
    <button class="badge badge-primary badge-pill mod" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button class="badge badge-primary badge-pill canc">X</button>
    <button class="badge badge-primary badge-pill top">TOP</button>
  </li>

</ul>

答案 2 :(得分：0)

您可以使用insertBefore()将li放在列表中的第一个li之前。

无需删除li。

$("#lista1").on('click', '#top', function() {
    var li = $(this).closest('li'); // parent of the button
    li.insertBefore('#lista1 > li:first-child');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="lista1" class="list-group">

  <li id = "1" class="list-group-item d-flex justify-content-between align-items-center">
    <p id = "elem1"> Carne </p>
    <button id = "mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id = "canc" class="badge badge-primary badge-pill">X</button>
    <button id = "top" class="badge badge-primary badge-pill">TOP</button>
  </li>
  
  <li id = "1" class="list-group-item d-flex justify-content-between align-items-center">
    <p id = "elem1"> Lorem ipsum </p>
    <button id = "mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
    <button id = "canc" class="badge badge-primary badge-pill">X</button>
    <button id = "top" class="badge badge-primary badge-pill">TOP</button>
  </li>

</ul>

答案 3 :(得分：0)

您可以这样做：

$(document).ready(function() {
    $("#lista1").on('click', '#top', function() {
        $(this).parent().parent().prepend($(this).parent());
    });
});

答案 4 :(得分：0)

您还可以使用prepend方法。

$(document).ready(function() {
  $("#lista1").on('click', '#top', function() {
     $ogg = $(this).closest('li');
        $ogg.remove();
    $("#lista1").prepend($ogg);  

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="lista1" class="list-group">

<li id = "1" class="list-group-item d-flex justify-content-between align-items-center">
  <p id = "elem1"> Carne </p>
  <button id = "mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
  <button id = "canc" class="badge badge-primary badge-pill">X</button>
  <button id = "top" class="badge badge-primary badge-pill">TOP</button>
</li>
<li id = "2" class="list-group-item d-flex justify-content-between align-items-center">
  <p id = "elem2"> Carne 2</p>
  <button id = "mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
  <button id = "canc" class="badge badge-primary badge-pill">X</button>
  <button id = "top" class="badge badge-primary badge-pill">TOP</button>
</li>

<li id = "3" class="list-group-item d-flex justify-content-between align-items-center">
  <p id = "elem3"> Carne 3</p>
  <button id = "mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Modifica</button>
  <button id = "canc" class="badge badge-primary badge-pill">X</button>
  <button id = "top" class="badge badge-primary badge-pill">TOP</button>
</li>


</ul>

相关问题
最新问题