我想通过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;
}
});
我来说说你这段代码的几个问题吧。
isset === undifined
很明显,你的undefined
拼错了,另外重点是不能用引号(感谢 @P酱 的提醒。href === 'javascript:' || href === "javascript:void(0)" || href === ''
这个判断写成href != 'javascript:' && href != 'javascript:void(0)' && href != ''
不行么?这样还不用写else
。另外,你想要的效果我推荐直接用href.match(/[http|ftp|www]/g)
会好看点。- 下面这个问题是你这段代码的重点,你的
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]')不行么?还是我理解错了?