js如何获取多个共同class的标签内容集合?

<img image-code="#qq_1_gif#" class="emoji_icon" src="image/qq/1.gif">
<img image-code="#qq_2_gif#" class="emoji_icon" src="image/qq/2.gif">

如代码所示,我想要获取 class 是 emoji_icon 的 image-code 标签里的内容,结果应该是#qq_1_gif#,#qq_2_gif#,两个内容,我是这么写的

var code = $(".emoji_icon").attr("image-code");

结果只获取到了#qq_1_gif#,请问该怎么做?

阅读 6.8k
6 个回答
var arr= $(".emoji_icon");
var arr1=[];
arr.each(function(){
    arr1.push($(this).attr("image-code"));
});

加个for循环就行了啊

document.querySelectorAll('.emoji_icon');
然后for循环

<img image-code="#qq_1_gif#" class="emoji_icon" src="image/qq/1.gif">
<img image-code="#qq_2_gif#" class="emoji_icon" src="image/qq/2.gif">

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

<script type="text/javascript">
    var arr = [];
    $(".emoji_icon").each(function(index,item){
        console.log();
        var imageCode = $(item).attr("image-code");
        arr.push(imageCode);
    })
    console.log(arr)
</script>

由于通过class获取的元素是一个集合,所以直接用.attr()方法时不能将所有内容获取到,可以利用楼上的循环方法,依次将attr值获取到并push到一个数组中。
也可以使用ES6中的map,和循环原理一样

var imgArr= $(".emoji_icon");
var arr = imgArr.map(function(item) {
   return imgArr.eq(item).attr('data-code'); 
});

<!DOCTYPE html>
<html>
<head>

<title>test</title>

</head>
<body>
<img image-code="#qq_1_gif#" class="emoji_icon" src="image/qq/1.gif">
<img image-code="#qq_2_gif#" class="emoji_icon" src="image/qq/2.gif">
<script type="text/javascript">

let emoji_icons = document.querySelectorAll('.emoji_icon');
emoji_icons.forEach((emoji_icon) => {
    let val= emoji_icon.getAttribute('image-code');
    console.log(val);
})

</script>
</body>
</html>

这总简单的就别用jq了,你的$(".emoji_icon") 得到的是对象,没有这种操作的,要先获取每个里面的dom
你直接复制我的代码看下就知道了,用的是ES6的语法

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题