使用JQuery查找body标签下所有子代的宽度答案

【问题标题】：Using JQuery to find the widths of all children under the body tag down to a specific generation使用JQuery查找body标签下所有子代的宽度
【发布时间】：2013-12-22 22:45:09
【问题描述】：

我正在尝试查找网页上一组 HTML 元素的宽度。

基本上，我想获得以下宽度：

html 元素
body 元素
body 元素 [祖先] 下的所有元素
“祖先”直属下到第四代的所有孩子（如果有那么远的话）

那么看下面的 HTML 代码：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div>
            <div>
                <div>
                    <div>
                        <div>Test 1</div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <div>
                        <div>Test 2
                            <div>Test 2 - Child</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

我可以很容易地获得html、body 和“祖先”[(1)、(2) 和 (3)] 的宽度：

console.log($('html').outerWidth());
console.log($('body').outerWidth());
$('body').children().each(function(){
    console.log(this.outerWidth());
});

但是，我不确定如何将“祖先”的后代传到第 4 代。所以第四代就是Test 1 和Test 2，Test 2 - Child 就是第五代。

仅供参考我在我无法控制的页面上执行此操作，因此我无法定位像 id 和 class 这样的标识符。此外，后代的标签可能会有所不同，它们可能并不总是divs。

【问题讨论】：

你需要使用递归函数来尽可能深入。
$.each('div', function(k,v) { console.log('div #' + k + ': ' + $(this).html()) });
@Tomanow 谢谢。不保证元素将是div 标签
@scrowler 现在调查一下
@ObinwanneHill 这是一个小提琴示例：jsfiddle.net/5SV9Z/1 - 不确定你想对数据做什么，但这是针对这两个最深的元素并将它们的宽度记录到控制台。你可以使用这样的东西，如果你愿意，可以定位第四级元素。使用全局变量了解您的深度。

标签： javascript jquery

【解决方案1】：

您必须向下遍历树 3 次。递归很容易：

编辑：由提问者贡献的小提琴：http://jsfiddle.net/WqupP/2/

function traverseDownBy(generations, start){ 
    var children = [],
        generation_num_start = generations+2,
        generation_num,
        counter = 0
        ;    
    function traverseDown(node){
        counter++;
        if(counter <= 1)
        {
            generation_num = generation_num_start;
        }
        else
        {
            generation_num--;
        }

        if(generation_num == 0){
            generation_num = generation_num_start;
            return;
        }        
        children.push(node);
        node.children().each( function () { traverseDown($(this)); } );
    }
    traverseDown(start);
    return children;
}
var children = traverseDownBy(4, $('body'));
$(children).each( function (){
    $('#result').append('<p>'+$(this).attr('id')+': '+$(this).width()+'</p>'); 
});

甚至

(function(){ //private. member protection.
    var generations = 4;
    function traverseDown(node){
        generations--;
        if(generations == 0) return;
        console.log(node.outerWidth());
        node.children().each( function () { traverseDown($(this)); } );
    }
    traverseDown($('body'));
})()

【讨论】：

谢谢。我得到不一致的结果。请参阅此jsfiddle.net/Yt24J/1 了解更多信息。
我找到了解决方案。它在这个小提琴上：jsfiddle.net/WqupP/2。您可以更新答案中的代码以便我接受吗？干杯。

【解决方案2】：

我希望我有问题...

好吧，一个糟糕的解决方案是组合.children() 函数的多个实例。示例：

var childrens = $('body').children().add(
    $('body').children().children().add(
        $('body').children().children().children().add(
            $('body').children().children().children().children()
        )
    )

childrens.each(blablah);

来源：JQuery's "find()" with depth limit, I can't use .children()

How to combine two jQuery results

【讨论】：

【解决方案3】：

简单地说：

$('body').find('*').each(function(k,v) {
    console.log($(this).width());
});

【讨论】：