jQuery實現的新聞列表上下移動調整順序程式碼例項

admin發表於2017-03-26
jQuery

本章節通過程式碼例項介紹一下如何通過jquery實現調整新聞列表的上下順序，並且點選能夠刪除當前新聞的功能。

這個具有較強的實用性，下面就通過程式碼例項詳細介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/ecmascript">
$(function(){
  $(".clearfix").on("click",".moveUpBtn",function(){
    var self=$(this);
    var _old=self.closest("li.courseList");
    var _new=self.closest("li.courseList").prev("li");
    if(_new.length>0){
      var _temp=_old.html();
      _old.empty().append(_new.html());
      _new.empty().append(_temp);
    }
  });
   
  $(".clearfix").on("click",".moveDownBtn",function(){
    var self=$(this);
    var _old=self.closest("li.courseList");
    var _new=self.closest("li.courseList").next("li");
    if(_new.length>0){
      var _temp=_old.html();
      _old.empty().append(_new.html());
      _new.empty().append(_temp);
    }
  });
    
  $(".clearfix").on("click",".deleteBtn",function(){
    var self = $(this);
    self.closest("li.courseList").remove();
  })
})
</script>
</head>
<body>
<ul class="clearfix">
  <li class="courseList">
    <div> 
      <div> 
        <span>div css教程:</span>
        <em>螞蟻部落</em> 
      </div>
      <div class="mid">2014/9/24</div>
      <div>  
        <a  class="moveUpBtn" href="javascript:;"><span>上移</span></a> 
        <a  class="moveDownBtn" href="javascript:;"><span>下移</span></a> 
        <a  class="deleteBtn" href="javascript:;"><span>刪除</span></a> 
      </div>
    </div>
  </li>
  <li class="courseList">
    <div> 
      <div> 
        <span>jquery教程:</span>
        <em>softwhy.com</em> 
      </div>
      <div>2014/9/24</div>
      <div>   
        <a  class="moveUpBtn" href="javascript:;"><span>上移</span></a> 
        <a  class="moveDownBtn" href="javascript:;"><span>下移</span></a> 
        <a  class="deleteBtn" href="javascript:;"><span>刪除</span></a> 
      </div>
    </div>
  </li>
  <li class="courseList">
    <div>
      <div> 
        <span>js教程:</span>
        <em>螞蟻部落</em> 
      </div>
      <div>2014/9/24</div>
      <div> 
        <a  class="moveUpBtn" href="javascript:;"><span>上移</span></a> 
        <a  class="moveDownBtn" href="javascript:;"><span>下移</span></a> 
        <a  class="deleteBtn" href="javascript:;"><span>刪除</span></a> 
      </div>
    </div>
  </li>
  <li class="courseList">
    <div>
      <div> 
        <span>正規表示式:</span>
        <em>antzone</em> 
      </div>
      <div class="mid">2014/9/24</div>
      <div>
        <a  class="moveUpBtn" href="javascript:;"><span>上移</span></a> 
        <a  class="moveDownBtn" href="javascript:;"><span>下移</span></a> 
        <a  class="deleteBtn" href="javascript:;"><span>刪除</span></a> 
      </div>
    </div>
  </li>
</ul>
</body>
</html>

上面的程式碼實現我們的要求，當然樣式不美觀，不過這都不是重點，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

2.$(".clearfix").on("click",".moveUpBtn",function(){})，為向上引動按鈕註冊click事件處理函式。

3.var self=$(this)，this是指向當前點選的dom元素，然後再將其轉換為jquery物件。

4.var _old=self.closest("li.courseList")，這個可以獲取點選按鈕的最近的class屬性值為courseList的父元素，在這裡就是一個完整的新聞行的最外層。

5.var _new=self.closest("li.courseList").prev("li")，獲取它上一個li元素，也就是當前一個完整的新聞行的上一個新聞行的最外層。

6.if(_new.length>0){

  var _temp=_old.html();

  _old.empty().append(_new.html());

  _new.empty().append(_temp);

}，判斷是否前面還有新聞行。

var _temp=_old.html()，將原來的內容儲存在一個臨時變數中。

_old.empty().append(_new.html())，將上一級的內容寫入當前li中。

_new.empty().append(_temp)，將上一級li中的內容設定為要上移的中的內容，這樣就實現了上移。

二.相關閱讀:

1.on()可以參閱jQuery on()一章節。

2.closest()函式可以參閱jQuery closest()一章節。

3.append()函式可以參閱jQuery append()一章節。

4.next()函式可以參閱jQuery next()一章節。 

5.remove()函式可以參閱jQuery remove()一章節。

相關文章