js获取某节点的特定父节点

废话不说了,功能函数如下

/*
    * @Author : Jeen @ vsfor.com
    * @Describe : 根据节点名称,查找某节点的特定父节点
    * @params :
    *       node  dom节点
    *       pname   父节点名称 parentNode.nodeName
    *       level   可选参数,层级,默认为1层
    * @example :
    * <div id="a"><div id="b"><div id="c"><div id="d"><a href="#" id="nodeA">Node</a></div></div></div></div>
    * 假定nodeA表示其中的 a 节点,则 getParentNode(nodeA,'div',3); 返回的是 id 为 b 的 div节点
    */
    function getParentNode(node,pname){
    level = arguments[2] ? (arguments[2]-1) : 0;
    if(node.nodeName == 'BODY') return node;
    var tnode = node.parentNode;
    pname = pname.toUpperCase();
    while(tnode.nodeName != pname && tnode.nodeName != 'BODY')
    {
        tnode = tnode.parentNode;
    }
    if(level === 0)
    {
        return tnode;
    }
    else
    {
        return getParentNode(tnode,pname,level);
    }
}


顺便附上测试代码和效果图吧:

<!DOCTYPE html>
<html>
<head>
<title>parentNode测试</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body id="10" style="padding-bottom:300px;">
<h2>定位目标元素的 特定 父 元素</h2>
<div id="a"><div id="b"><div id="c"><div id="d"><a href="#" id="nodeA">Node</a></div></div></div></div>
<script type="text/javascript" language="javascript">
$(function(){
    $('#nodeA').click(function(){
        var tnode = getParentNode(this,'div',3);
        alert($(tnode).attr('id'));
        return false;
    });
});
function getParentNode(node,pname){
    level = arguments[2] ? (arguments[2]-1) : 0;
    if(node.nodeName == 'BODY') return node;
    var tnode = node.parentNode;
    pname = pname.toUpperCase();
    while(tnode.nodeName != pname && tnode.nodeName != 'BODY')
    {
        tnode = tnode.parentNode;
    }
    if(level === 0)
    {
        return tnode;
    }
    else
    {
        return getParentNode(tnode,pname,level);
    }
}
</script>
</body>
</html>


164726548.png


你可能感兴趣的:(js,parentNode)