首页 > 使用jquery获取父级元素的属性

使用jquery获取父级元素的属性

我想通过jquery获取a标签的父级元素的属性来为a的href添加参数
比如a的父级dom元素为div,其属性from的值为test,则在这个a后添加&test,如果父级元素无from属性,则再往上查找,知道找到含有from属性的父元素。
思路如下:
1、查找所有a节点
2、获取其父类,一级一级往上找,使用closest()查找,获取其from参数值
3、判断a节点的href属性是否包含?,包含则直接添加 &from ,否则添加?&from 如果添加href为javascript:或者 javascript:void(0) 时则不改变其href属性
现在问题就是,这个函数里面父元素的标签可能不唯一,即可能不仅仅为div,还有span等等。

这是我的实现,但是有部分问题

$("a").click(function a() {
var node = $(this);
var href = node.attr("href");
if (href === 'javascript:' || href === "javascript:void(0)" || href === '') {} else {
    var isset = '?';
    do {
        var parent = node.parent();
        isset = parent.attr("from");
    }
    while (isset === 'undifined');
    $(this).href += isset;
}
});

我来说说你这段代码的几个问题吧。

  1. isset === undifined 很明显,你的undefined拼错了,另外重点是不能用引号(感谢 @P酱 的提醒。
  2. href === 'javascript:' || href === "javascript:void(0)" || href === ''这个判断写成href != 'javascript:' && href != 'javascript:void(0)' && href != ''不行么?这样还不用写else。另外,你想要的效果我推荐直接用href.match(/[http|ftp|www]/g)会好看点。
  3. 下面这个问题是你这段代码的重点,你的node永远还是$(this)没有改变,所以你循环只能造成死循环。改成node = node.parent();应该会有效果。

题主的代码有不少问题……
给你个我的实现吧,望有帮助。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<span from="from1"><a href="to1">href="to1"</a></span>
<p from="from2"><span><a href="to2?ooxx">href="to2?ooxx"</a></span></p>
<div from="from3"><span><span><a href="javascript:void(0)">href="javascript:void(0)"</a></span></span></div>
<span from="from4"><span><span><span><a href="javascript:alert(1)">href="javascript:alert(1)"</a></span></span></span></span>
<div><span><span><span><span><a href="to5">href="to5"</a></span></span></span></span></div>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
(function($){
$('a').each(function () {
    var href = $.trim(this.href)
    if(!~href.indexOf('javascript:')){
        var $from = $(this).closest('[from]')
        if($from.size() !== 0){
            var from = $from.attr('from')
            this.href = href + (href.indexOf('?') === -1 ? '?' : '&') + from
        }
    }
    //return false; //中断链接跳转方便调试
})  
})(jQuery)
</script>
</body>
</html>

干嘛一级一级找,直接.closest('[from=test]')不行么?还是我理解错了?

【热门文章】
【热门文章】