jQuery 从位于 <a> 标签内的图像中获取“alt”属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3883882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the "alt" attribute from an image that resides inside an <a> tag
提问by Marco
this should be fairly simple but for some reason, it doesn't work.
这应该相当简单，但由于某种原因，它不起作用。
I want to get the "alt" attribute from an image that resides inside an tag
我想从位于标签内的图像中获取“alt”属性
<div id="album-artwork">
<ul>
<li><a href="link to large image"><img src="thumbnail" alt="description of the image" /></a></li>
...
</ul>
</div>
$("#album-artwork a").click(function(e) {
e.preventDefault();
var src = $(this).attr("href");
var alt = $(this).next("img").attr("alt");
alert(src); // ok!
alert(alt); //output: undefined
});
any ideas why next() doesn't work? Is there a better solution out there?
任何想法为什么 next() 不起作用？有没有更好的解决方案？
Thanks in advance Marco
提前致谢 马可
回答by Catfish
It's because the image tag is inside the ul tag. next only looks for tags at the same level. You'll have to use
这是因为图像标签在 ul 标签内。next 只查找同一级别的标签。你必须使用
var alt = $(this).children("img").attr("alt");
EDIT: included the additional " that was missing
编辑：包括缺少的附加“
回答by marko
$(this).find('img').attr('alt');
回答by marko
回答by Alec
Try $(this).find('img')instead to select some element withinthe link.
尝试$(this).find('img')，而不是选择一些元素中的链接。
回答by Marco
Nevermind. I just got it... I've realized that the imgis not a sibling of <a>but a child of <a>
没关系。我刚刚明白了...我意识到这img不是 的兄弟姐妹<a>而是 的孩子<a>
This is the correct syntax
这是正确的语法
var alt = $(this).children("img").attr("alt");
回答by Dan
Won't .next pick up the next element which is the next Li and not the IMG?
.next 不会选择下一个元素，即下一个 Li 而不是 IMG？
回答by user2727841
try this tested and its working!!!
试试这个测试和它的工作！
<div id="album-artwork">
<ul>
<li><a href="javascript:void(0);"><img src="images/ajax-loader.gif" alt="ajax-loader" /></a></li>
<li><a href="javascript:void(0);"><img src="images/close.png" alt="close" /></a></li>
<li><a href="javascript:void(0);"><img src="images/copy.png" alt="copy" /></a></li>
</ul>
</div>
and jQuery code is
和 jQuery 代码是
$(document).ready(function() {
$("#album-artwork a").click(function(e) {
e.preventDefault();
var src = $(this).attr("href");
//var alt = $(this).next("img").attr("alt");
var alt = $(this).children().attr("alt");
//find function also do the same thing if you want to use.
/*var alt = $(this).find("img").attr("alt");*/
alert(src); // ok!
console.log(src); // ok!
alert(alt); //output: not undefined now its ok!
console.log(alt); //output: not undefined now its ok!
});
});
the children()function find any children but if you want to find any specific children define the children name like this children("img")ORchildren("button").
该children()功能发现任何儿童，但如果你想找到任何具体的儿童定义孩子的名字这样的children("img")ORchildren("button")。
回答by Ivan Laharnar mink.si
Dont complicate:
不要复杂化：
$('img').on({'click': function(){
var alt = this.alt;
