选择jQuery中最深的子级

qzwqbdag  于 2023-01-20  发布在  jQuery
关注(0)|答案(7)|浏览(135)

有没有一种廉价的方法可以选择元素的最深层子元素?
示例:

<div id="SearchHere">
  <div>
    <div>
      <div></div>
    </div>
  </div>
  <div></div>
  <div>
    <div>
      <div>
        <div id="selectThis"></div>
      </div>
    </div>
  </div>
  <div>
    <div></div>
  </div>
</div>
kkih6yb8

kkih6yb81#

var $target = $('#SearchHere').children(),
    $next = $target;

while( $next.length ) {
  $target = $next;
  $next = $next.children();
}

alert( $target.attr('id') );

或者这个更短一点

var $target = $('#SearchHere').children();

while( $target.length ) {
  $target = $target.children();
}

alert( $target.end().attr('id') ); // You need .end() to get to the last matched set
    • 原答复:**

这似乎行得通:

var levels = 0;
var deepest;

$('#SearchHere').find('*').each(function() {
    if( !this.firstChild || this.firstChild.nodeType !== 1  ) {
        var levelsFromThis = $(this).parentsUntil('#SearchHere').length;
        if(levelsFromThis > levels) {
            levels = levelsFromThis;
            deepest = this;
        }
    }
});

alert( deepest.id );

如果您知道最深的是某个标记(或其他标记),则可以通过将.find('*')替换为.find('div')来加快速度。

    • EDIT:**更新为仅在当前元素 * 不 * 具有firstChild时检查长度,或者如果当前元素具有firstChild,则firstChild不是类型1节点。
ngynwnxp

ngynwnxp2#

这是对@user113716的回答的一个小小的改进,这个版本处理没有子对象的情况,并返回目标本身。

(function($) {

    $.fn.deepestChild = function() {
        if ($(this).children().length==0)
            return $(this);

        var $target = $(this).children(),
        $next = $target;

        while( $next.length ) {
          $target = $next;
          $next = $next.children();
        }

        return $target;
    };

}(jQuery));
4xy9mtcn

4xy9mtcn3#

我不认为你能直接做但你可以试试

var s = "#SearchHere";
while($(s + " >div ").size() > 0)
    s += " > div";
alert( $(s).attr('id') );
xxhby3vn

xxhby3vn4#

这个可链接的一行程序对我很有效,但是它假设下面的层次结构中只有一个叶节点。

jQuery("#searchBeginsHere")
  .filter(function(i,e){ return jQuery(e).children().size() === 0; })
7cjasjjr

7cjasjjr5#

版本,以获得最深的每一叶。
http://jsfiddle.net/ncppk0zw/14/

var found = $('#SearchHere *');

for (var i = 0; i < found.length; i++) {
    if (i > 1) {
        if (found[i].parentNode !== found[i-1]) {
            // Deepest. Next element is other leaf
            console.log(found[i-1]);
            continue;
        }
        if (i == found.length-1) {
            // Deepest. Last element in DOM tree
            console.log(found[i]);
        }
    }
}
g6ll5ycj

g6ll5ycj6#

这将在页面上找到类型为“param”的最深元素。如果你正在寻找最深的元素或其他什么东西,这很有用。

function deepest_child(param) {
    var element_list = $(param)
    var depth = 0
    var deepest_element
    element_list.each(
        function (index) {
            this_depth = $(this).parents().length
            if (this_depth > depth) {
                depth = this_depth 
                deepest_element= $(this)
            }
        })  
    return deepest_element
}
r6l8ljro

r6l8ljro7#

使用CSS的简单方法
只需在类或ID之间添加**空格

#SearchHere #selectThis{
      width:100px;
      height:50px;
      background-color:red;
    }
    
    #SearchHere .blueItem{
      width:100px;
      height:50px;
      background-color:blue;
    }
    
    #SearchHere .lastItem{
      width:100px;
      height:50px;
      background-color:cyan;
    }
    
    #SearchHere .middleItem{
      width:100px;
      height:50px;
      background-color:black;
    }
<div id="SearchHere">
    <div>
        <div class="blueItem">
            
        </div>
    </div>
    <div class="middleItem"></div>
    <div>
        <div>
            <div>
                <div id="selectThis"></div>
            </div>
        </div>
    </div>
    <div class="lastItem">
        <div></div>
    </div>
</div>

相关问题