如何使用jQuery访问父元素属性
How can I access the parent element properties using jQuery?
如何使用jQuery访问父元素属性?例如,下面的代码在我的网站上:
<div style="text-align: center;">
<h3>Testing</h3>
<p>
<a style="display: inline-block;" href="http://www.google.com" target="_blank">
<img class="alignleft size-full wp-image-3748" src="/wp-content/uploads/BBB336699.png" alt="BBB" height="45">
</a>
<a style="display: inline-block;" href="http://www.facebook.com" target="_blank">
<img class="alignleft size-full wp-image-3749" src="/wp-content/uploads/COA336699.png" alt="COA" height="45">
</a>
<a style="display: inline-block;" href="http://portal.hud.gov/hudportal/HUD" target="_blank">
<img class="alignleft size-full wp-image-3750" src="/wp-content/uploads/HUD336699.png" alt="HUD" height="45">
</a>
<a style="display: inline-block;" href="http://www.gmail.com/" target="_blank">
<img class="alignleft wp-image-3921" src="/wp-content/uploads/HPF336699.png" alt="HPF" height="45">
</a>
</p>
</div>
$("a").click(function(event){
var key = window.event.toElement;
var re = /speridian/gi;
if (key.href.search(re) == -1) {
alert("it is not");
}
});
当我单击上面的链接时,我得到了img
元素事件属性,但我需要a
元素事件属性(如toElement
)。
有谁能帮我弄清楚如何在这里获得锚元素事件吗。提前感谢!
问题是因为您使用的是window.event
。使用this
来引用单击的元素:
$("a").click(function(e) {
e.preventDefault(); // stop the page being redirected
var re = /speridian/gi;
if ($(this).prop('href').search(re) == -1) {
alert("it is not");
}
});
使用
.parent(SELECTOR)
,获取当前匹配元素集中每个元素的父元素(直接父元素),可以选择由选择器进行筛选
$('img').on('click', function(e) {
//e.stopPropagation();
console.log($(this).parent('a').prop('href'));
});
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="text-align: center;">
<h3>Testing</h3>
<p>
<a style="display: inline-block;" href="http://www.google.com" target="_blank">
<img class="alignleft size-full wp-image-3748" src="/wp-content/uploads/BBB336699.png" alt="BBB" height="45">
</a>
<a style="display: inline-block;" href="http://www.facebook.com" target="_blank">
<img class="alignleft size-full wp-image-3749" src="/wp-content/uploads/COA336699.png" alt="COA" height="45">
</a>
<a style="display: inline-block;" href="http://portal.hud.gov/hudportal/HUD" target="_blank">
<img class="alignleft size-full wp-image-3750" src="/wp-content/uploads/HUD336699.png" alt="HUD" height="45">
</a>
<a style="display: inline-block;" href="http://www.gmail.com/" target="_blank">
<img class="alignleft wp-image-3921" src="/wp-content/uploads/HPF336699.png" alt="HPF" height="45">
</a>
</p>
</div>
相关文章:
- javascript来显示元素属性
- 自定义HTML元素属性未显示-Web组件
- 主元素属性?(或技术)
- 使用模板后,使用Angular获取元素属性值
- 如何从不同范围外的元素属性中获取求值表达式
- 可以't访问元素属性(如果已明确设置)
- 传递引用 jQuery 后无法访问元素属性
- 如何替换元素属性中的部分文本
- 添加新元素属性
- 如何使用jQuery访问父元素属性
- 使用jQuery.attr()方法获取元素属性
- 修改时,哪些DOM元素属性会导致浏览器执行回流操作
- Javascript数据将元素属性绑定到URL中的锚href
- 初始化可从元素属性值观察到的Knockout
- 获取内联样式中的元素属性
- 如何在 html 元素属性中使用 Angular 2 外推法
- 将元素属性与 javascript 折叠方法结合使用时,引导折叠无法正常工作
- 如何观察聚合物元素属性值从索引.html的变化
- 使用 JavaScript 修改 DOM 元素属性
- 聚合物节点到元素属性