如何找到div的路径加上内容的宽度和高度

Question

如何使用js或jquery获取内容的路径加上它的宽度和高度

所以，如果你有

主页|人民|帮助|商店|支持

然后点击Home它将显示

div.sys_main_menu > div.sys_mm >
div.sys_mm_cnt.bx-def-margin-sec-leftright >
table.topMenu > tbody > tr > td.top > a.top_link >
span.down.bx-def-padding-sec-leftright 54px > 38px

所以路径加上内容的宽度和高度

谢谢

Answer 1

我假设Home点击时有某种jquery或js动作。只需点击一下，您就可以找到当前的标签和类，然后在树中反向添加相关信息。

＆＃13;

＆＃13;

$('.down').on('click',function(){
   var child=$(this);
    var parent=child.parent().prop('className');
    var tree=[];
    tree.push(child.css('width'));
    tree.push(child.css('height'));
    tree.push(child.prop('className'));
    tree.push(child.prop('tagName'));
    tree.push(parent);
    while(child.parent().hasClass('sys_main_menu') != true){
        child=child.parent();
        if(child.parent().prop('className')!='')
            parent=child.parent().prop('className');
        tree.push(child.prop('tagName'));
        tree.push(parent);
    }
    child=child.parent();
    parent=child.parent().prop('className');
    tree.push(child.prop('tagName'));
	var path='';
    for(i=tree.length-1;i>=0;i--){  
	 path=path+tree[i];
	 if(i>0)
		path=path+'>';
    }
	console.log(path);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="sys_main_menu"> 
    <div class="sys_mm"> 
        <div class="sys_mm_cnt bx-def-margin-sec-leftright">
            <table class="topMenu">
                <tbody> 
                    <tr>
                        <td class="top">
                            <a class="top_link">
                                <span class="down bx-def-padding-sec-leftright" style="width:54px;height=38px">
                                    Home
                                </span>
                            </a>
                        </td>
                    </tr>
            </table>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;