使用方法
簡介
jQuery提供許多用來遍歷DOM元素的方法，其中用來找尋兄弟元素及父親元素，今天要介紹的是nextUntil,prevUntil,parentsUntil這幾個較不常用(誤><)的方法。jQuery.fn.nextUntil
要使用這個方法首先你必須懂得使用next方法，這個方法是next的加強版，怎麼說呢，next方法只能取得目前節點後的一個元素，而nextUntil則是取得一組元素，這組元素大小取決於你給予的終止點。
簡單的說nextUntil讓你可以取得元素之後一直到終止點路上的所有的元素。
趕快來看個例子吧
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<dl>
<dt id="term-1">term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt id="term-3">term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
</body>
</html>
執行nextUntil()
$("#term-2").nextUntil().css("background-color", "#ff3333");
執行nextUntil("selector")
$("#term-2").nextUntil("#term-3").css("background-color", "#ff3333");
執行nextUntil(element)
$("#term-2").nextUntil().css("background-color", "#ff3333");
相似。
jQuery.fn.prevUntil
使用prevUntil的方式與nextUntil一模一樣，只是prevUntil是用來取得該節點之前一直到終止點路徑的所有元素，在這邊就不多做說明。
jQuery.fn.parentsUntil
使用parent()方法會取得該元素的父親節點，那如果要同時取得父親、祖父、曾祖父甚至曾....曾祖父時要怎麼實作呢?jQuery提供一個方法讓我們能夠輕鬆地做到這個功能，那就是parentsUntil，這邊要注意是parents不是parnet歐。趕快來看這個範例吧
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<dl>
<dt id="term-1">term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt id="term-3">term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
</body>
</html>
執行parentsUntil()
$("#term-1").parentsUntil().css("border", '1px solid #ff6633')
執行parentsUntil("selector")
$("#term-1").parentsUntil("body").css("border", '1px solid #ff6633')
今天介紹的這幾個方法筆者不知道甚麼請況使用最巧妙，如果你有好的idea請不吝告知。
參考資料
http://api.jquery.com/parentsUntil/
http://api.jquery.com/nextUntil/
http://api.jquery.com/prevUntil/
沒有留言:
張貼留言