获取每个元素的属性 - jQUery

Question

为什么console.log ( $("img").attr("title") );只获得第一个标题属性？

<img src="" title="im the image" />
<img src="" title="im ass well the image" />

如何控制每张图片的日志标题？

Answer 1

假设你想要一个标题属性数组：

＆＃13;

＆＃13;

var titles = $("img").map(function() {
   return this.title;
}).get();

   console.log(titles);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="" title="im the image" />
<img src="" title="im ass well the image" />

＆＃13;

＆＃13;

＆＃13;

或者，在纯JavaScript中：

＆＃13;

＆＃13;

var titles = Array.from( document.querySelectorAll('img') ).map(function(img){
  return img.title;
});

   console.log(titles);

＆＃13;

<img src="" title="im the image" />
<img src="" title="im ass well the image" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只匹配第一个元素，而不是DOM中的所有img标记。为此，您可以使用$.each()

$("img").each(function() {
   console.log($(this).attr("title"));
});

完整示例：

$("img").each(function() {
   console.log($(this).attr("title"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="" title="im the image" />
<img src="" title="im ass well the image" />

Answer 3

也可以使用以下代码

$('img').each(function (index, value) { console.log($(value).attr("title")); });

或

$('img').each(function (index, value) { console.log($(this).attr("title")); });