javascript - 获取图像 src 如果有多个则获取图像 src 只获取一张图像 src

标签 javascript jquery html

我正在尝试使用 jquery 获取图像 src,如下所示:

HTML

<div class="post_container"> 
   <img src="http://imageurl.com">
</div>
<div class="appendedimageContainer"></div>

Javascript

var imageSrc = $('.post_container img').attr('src');
$(".appendedimageContainer").append('<div class="appended"><img src="'+imageSrc+'"></div>');

上面的代码运行良好,但我想问的问题就在这里。如果图片不止一张,我希望它们不要附加。我只想追加其中一个。

例如如果情况如下:

<div class="post_container"> 
   <img src="http://imageurl1.com">
   <img src="http://imageurl2.com">
   <img src="http://imageurl3.com">
   <img src="http://imageurl4.com">
</div>
<div class="appendedimageContainer"></div>

只需让其中一个获取图像 url 并忽略其他图像 src。你能帮忙我该怎么做吗?

最佳答案

使用 nth-child 选择器来获取您想要的图像,例如

var imageSrc = $('.post_container img:nth-child(0)').attr('src');

关于javascript - 获取图像 src 如果有多个则获取图像 src 只获取一张图像 src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53721873/

相关文章:

php - Ajax 从 JSON 返回未定义 - 登录系统和最佳实践

javascript - bootstrap 折叠 div 上的 fitVids() - 在单个 iframe 上打开多个视频的小错误

jquery - 如何在标题中获取仅图标的控制组?

html - 在 z-index 中将 div 层叠在一起的最佳方法是什么?

php - 通过javascript发布php ajax结果时激活javascript

javascript - Vue路由器: fetching data from server (asynchronously with ajax) does not update the view in component

javascript - 使用 jquery 动画化 iframe 内容

javascript - 使用过滤器获取回文

jquery - 折叠一个 DIV 以隐藏其内容,即使它是按百分比定义的

javascript - 添加 JQuery "Read More"脚本而不剥离 HTML 标签