jQuery找到哪個父母更接近？

Question

在jQuery中，您可以調用closest來查找最接近的父級。

如果我在table有一個td一個在li一個ula。我想知道親本ul是否比親本table更接近。顯然在這種情況下，答案是顯而易見的。

如果我運行$('a').closest('table').length或$('a').closest('ul').length都返回1

我想找出哪個父母是在DOM接近。

從技術上講，如果有一種方法比在這種情況下$('a').closer('ul', 'table')將返回ul，因爲它在DOM中更接近。

<table> <!-- Is this closer --> 
    <tr> 
     <td> 
      <ul> <!-- Or is this closer --> 
       <li> 
        <a href="#">A button</a> 
       </li> 
      </ul> 
     </td> 
    </tr> 
</table> 

Answer 1

可以列出多個元素選擇到closest功能，它只會找到最接近的其中之一：

$('a').closest('table, ul') 

例子：

$(document).on("click", function(event) { 
 
    $(event.target).closest("li, b").toggleClass("hilight"); 
 
});

.hilight{ 
 
    background: rgba(255, 0, 0, 0.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><b>Click me!</b></li> 
 
    <li>You can also click this line <b>or click me!</b></li> 
 
</ul>

Answer 2

一個元素只有一個父節點，高於那些祖先節點。

從這裏：https://stackoverflow.com/a/15149590/1876047 - 您可以使用

$(elem1).offset().top - $(elem2).offset.().top 

由於這兩個節點都是你正在考慮的元素的祖先，從DOM樹的根最遠的一個是衣櫃裏的元素。

因此，如果上述差異大於0，則elem2最接近，否則elem1最接近。

Answer 3

我喜歡費邊的答案;但實際測量的距離，您可以使用此：

var $parentsUntilTable = $('li').parentsUntil('table'); 
 
var $parentsUntilUl = $('li').parentsUntil('ul'); 
 
console.log($parentsUntilTable.length < $parentsUntilUl.length 
 
      ? 'table is closer' 
 
      : 'ul is closer');

<!-- results pane console output; see http://meta.stackexchange.com/a/242491 --> 
 
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> 
 

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

 
<table> 
 
    <tr> 
 
    <td> 
 
     <ul> 
 
     <li> 
 
     </li> 
 
     </ul> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 4

下面是一個簡單實現.closer()方法，返回選擇最接近給定元素的：

$.fn.closer = function(varargs) { 
    var $elem = $(this); 
    while ($elem.length) { 
    for (var i = 0, len = arguments.length; i < len; i++) { 
     if ($elem.is(arguments[i])) { 
     return arguments[i]; 
     } 
    } 
    $elem = $elem.parent(); 
    } 
    return null; 
}; 

看到它在行動on jsFiddle。

Answer 5

使用.parents()。 它返回從最近到最遠排列的所有父母的列表。

使用這個和使用.closest(selector)的區別在於它接受一個jQuery對象而不是選擇器字符串，它必須被硬編碼。同時jQuery對象可以是集合，因此可以即時生成。

(function($) { 
    $.fn.getClosest = function(testElements) { 
    var element = $(this); 
    var parents = element.parents(); 
    var indexClosest = Number.MAX_VALUE; 
    testElements.each(function() { 
     var index = parents.index($(this)); 
     if (index > -1 && index < indexClosest) 
     indexClosest = index; 
    }); 
    return parents.eq(indexClosest); 
    }; 
})(jQuery); 

使用功能是這樣的：

$("a").getClosest($("table, ul")) 

Fiddle with advanced use case