使用jquery將選中的項目傳送到列表底部

我想使用jquery（不是angularjs）創建待辦事項列表，將項目添加到列表中，並且如果項目被選中而不是將項目傳輸到列表底部。我將如何做到這一點使用jQuery？使用jquery將選中的項目傳送到列表底部

我感謝你的幫助。

我已經開始用下面的代碼：

HTML：

<html> 
    <head> 
     <title>My Page</title> 
     <link rel="stylesheet" type="text/css" href="css/test02.css"/> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

     <script type="text/javascript" src="js/test02.js"></script> 

    </head> 
    <body> 

     <div class="container" > 
      <h1>Todos</h1> 
      <input type="text" id="new-text" placeholder="What do you need to do?"> 
      <input type="submit" id="add" value="Add"> 

      <ul id="todolist"></ul> 


     </div> 

    </body> 
</html>

JS：

$(function() { 
      $("#add").on('click', addListItem); 
      $(document).on('click', '.done', finishItem); 
     }); 

    function addListItem() { 
     if($("#new-text").val() !== ''){ 
      var text = $("#new-text").val(); 
      $("#todolist").append('<li><input type="checkbox" id="mycheckbox" class="done"/>' + text + '</li>'); 
      $("#new-text").val(''); 
      } 
     }       
    } 

    function finishItem() { 
     if($(this).parent().css('textDecoration') !== 'line-through'){ 
      $(this).parent().css('textDecoration', 'line-through');  
     }else{ 
      $(this).parent().css('textDecoration', 'none'); 
     } 
    }

來源

2014-08-28 shamira

首先，你必須在你的JS代碼冗餘花括號的「addLastItem」功能之後。

我對你的代碼一些建議：

保存在一個變量的所有jQuery的元素，以加快你的頁面：

var $this = $(this), 
    $parent = $this.parent();

而不是使用「文本修飾」屬性確定天氣列表元素「完成」 ...
```
if ($(this).parent().css('textDecoration') !== 'line-through') { ... }
```
...使用複選框的「選中」屬性：
```
if ($this.is(':checked')) { ... }
```

爲了將選中的項目移動到列表的底部，您可以使用jQuery的「.append（）」函數。

看看這個fiddle。我還使用「prepend」函數將元素移動到列表頂部，如果它未被選中。

function finishItem() { 
    var $this = $(this), 
     $parent = $this.parent(); 

    if ($this.is(':checked')) { 
     $parent.css('textDecoration', 'line-through'); 

     $todolist.append($parent); 

    } else { 
     $parent.css('textDecoration', 'none'); 

     $todolist.prepend($parent); 
    } 
}

來源

2014-08-28 21:28:12

我知道這是一箇舊帖子，但我看到你仍然是一個活躍的社區成員，所以我希望你可以提供幫助。我正在使用你的方法，但是我遇到了這樣的問題：當我檢查或取消選中列表中間或底部的項目時，窗口向上滾動，有時一直回到頂部。我怎樣才能防止滾動？這裏有一個[JSFiddle]（https://jsfiddle.net/caffeinatedcoder/6krn9sb2/）來展示我如何調整你的代碼，並看到它的行動。 – CaffeinatedCoder 2016-09-23 16:12:32

似乎是浮動的問題。您可以爲每個列表項添加'clear：right'或完全刪除'.name'的浮動：https://jsfiddle.net/664ucbtx/1/ – 2016-09-25 20:43:07

完美，非常感謝！ – CaffeinatedCoder 2016-09-26 20:30:57

.appendTo("#todolist")將當前元素移到列表的末尾。

那麼，你把所有的$(this).parent().css('textDecoration', 'line-through');

將其更改爲$(this).parent().css('textDecoration', 'line-through').appendTo("#todolist");

來源

2014-08-28 21:09:45 andi

使用jquery將選中的項目傳送到列表底部

回答

相關問題