看了document的說明，還是一頭霧水，說明如下:

回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變為前一次的狀態。
如果之前沒有破壞性操作，則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。這包括在 Traversing 中任何返回一個jQuery物件的函數--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

索性自己寫段程式try了一下，就懂它的意思了。直接看範例最容易懂，您可以把以下的code貼到w3cschools的線上測試。
以下的code中，用next()去取得div2的object並修改了css的樣式，然後用end()去取得一個JQuery object放入變數v中，再show出這個object的text()。
果然!變數中放的是div1的object。好一記回馬槍呀!如此我再繼續改寫以下的程式:

(原始:)
var v = $('#div1').next().css('background-color','red').end();
alert($(v).text());

(修改後:)
var v = $('#div1').next().css('background-color','red').end().css('background-color','blue');

瞧!這就把原本的div1也修改為藍色的了。為何要用end()來抓取原來的jQuery object呢?再下一行$('#div1').css('background-color','blue')去改不就好了?
我想是因為效率問題吧。因為DOM文件是以TREE的方式展示其元素的，當再次的宣告了一次$('#div1')，意味著又得重新再TREE中搜尋了，如此豈不是很沒效率。這是我的猜測，
如有錯誤歡迎指正。


(Demo:)
<

html><head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
      var v = $('#div1').next().css('background-color','red').end();
      alert($(v).text());
})
</script></head>
<body>
<div id="div1">文字一</div>
<div id="div2">文字二</div>
<div id="div3">文字三</div>
</body></html>
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 忙裡偷閒 的頭像
    忙裡偷閒

    忙裡偷閒的部落格

    忙裡偷閒 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄