在jquery中,當我們需要獲取某個元素的父元素時,我們可以使用parent()方法來實現,但是這種方法只能精確選擇到某個元素的直接父元素,如果我們需要獲取父元素的父元素,或者更高層的祖先元素,該怎么辦呢?這時候我們可以使用選擇器中的模糊匹配來實現。
假設我們有這樣的html結構:
<div class="grandfather"> <div class="father"> <div class="child"></div> </div> </div>
我們想要獲取child元素的祖先元素中class為grandfather的元素,我們可以使用以下選擇器:
$('.child').parents('.grandfather');
這里parents()方法是用來獲取所有匹配選擇器的祖先元素的,這里我們可以將選擇器設置為grandfather,這樣就只會獲取到class為grandfather的元素了。
如果我們需要獲取所有祖先元素,而不是只獲取一層祖先元素,我們可以使用parents()方法的另一個版本parentsUntil(),它的用法如下:
$('.child').parentsUntil('.grandfather');
這里我們設置了選擇器為grandfather,這樣就會獲取從child元素一直到class為grandfather的祖先元素。
需要注意的是,如果我們在設置選擇器時使用了太過模糊的選擇器,比如設置了'*'通配符,這時候選擇器會匹配到所有的祖先元素,這種情況下會導致效率低下,建議盡量設置一個具體的選擇器來提高匹配效率。
下一篇css布局解決方案