Question

这应该相当简单，但出于某种原因，它不起作用。

我想从位于标签内的图像中获取“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

});

为什么next（）不起作用的任何想法？那里有更好的解决方案吗？

提前致谢马可

Answer 1

这是因为图片标签位于ul标签内。 next只查找同一级别的标签。你必须使用

var alt = $(this).children("img").attr("alt");

编辑：包括额外的“缺失

”

Answer 2

$(this).find('img').attr('alt');

Answer 3

尝试使用$(this).find('img')来选择链接中的某个元素。

Answer 4

或

$('img', this).attr('alt');

测试： http://jsbin.com/amado4

Answer 5

没关系。我刚刚明白了...我已经意识到img不是<a>的兄弟，而是<a>的孩子

这是正确的语法

var alt = $(this).children("img").attr("alt");

Answer 6

不会.next选择下一个元素，即下一个李而不是IMG？

Answer 7

尝试此测试及其工作!!!

<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>

和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!
        });
    });

children()函数会找到任何子项，但如果要查找任何特定的子项，请定义子项名称，如children("img") 或 children("button")。

Answer 8

不要复杂化：

<div class="parts-tracker">
  <p style="text-align: center; vertical-align: middle; line-height: 100px;"><strong>Table Log</strong></p>
</div>

<table style="border:1 solid black; background:#f8f7f5;" width="700px" cellspacing="5" cellpadding="5" border="0">
  <thead>
    <tr>
      <th style="padding:15px" bgcolor="#d9e5ee" align="center"><small>Part</small></th>
      <th style="padding:15px" bgcolor="#d9e5ee" align="center"><small>Price</small></th>
      <th style="padding:15px" bgcolor="#d9e5ee" align="center"><small>Stuff here!</small></th>
      <th style="padding:15px" bgcolor="#d9e5ee" align="center"><small>Things here!</small></th>
      <th style="padding:15px" bgcolor="#d9e5ee" align="center"><small>More stuff!</small></th>
      <th style="padding:15px" bgcolor="#d9e5ee" align="center"><small>Things!</small></th>
      <th style="padding:15px" bgcolor="#d9e5ee" align="center"><small>THINGS!!!</small></th>
    </tr>
  </thead>

从位于<a> tag</a>内的图片中获取“alt”属性

8 个答案: