- 首页
- 前端开发
- 我将如何使用 jquery 选择此 div 中的第一张图像?
我将如何使用 jquery 选择此 div 中的第一张图像?
[英] How would I select the first image in this div with jquery?
本文介绍了我将如何使用 jquery 选择此 div 中的第一张图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个 div 和一堆其他 div 和图像.主要的 div 是 m-carousel-inner.我想要做的是选择这个 div 中的第一个 img 元素.我将如何在 javascript 或 jquery 中执行此操作?
<div class="m-item"><div class="m-card-light"><div class="mqc_img"><img src="http://placehold.it/280x210"></div><!-- end .mqc_img --><div class="mqc_info"><h5>标题</h5>Lorem ipsum dolor 坐 amet</div><!-- end .mqc_info -->
<div class="m-item"><div class="m-card-light"><div class="mqc_img"><img src="http://placehold.it/280x210"></div><!-- end .mqc_img --><div class="mqc_info"><h5>标题</h5>Lorem ipsum dolor 坐 amet</div><!-- end .mqc_info -->
<div class="m-item"><a href="#"><div class="m-card-light"><div class="mqc_img"><img src="http://placehold.it/280x210"></div><!-- end .mqc_img --><div class="mqc_info"><h5>标题</h5>Lorem ipsum dolor 坐 amet</div><!-- end .mqc_info -->
</a>
<div class="m-item"><div class="m-card-light"><div class="mqc_img"><img src="http://placehold.it/280x210"></div><!-- end .mqc_img --><div class="mqc_info"><h5>标题</h5>Lorem ipsum dolor 坐 amet</div><!-- end .mqc_info -->
<div class="m-item"><div class="m-card-light"><div class="mqc_img"><img src="http://placehold.it/280x210"></div><!-- end .mqc_img --><div class="mqc_info"><h5>标题</h5>Lorem ipsum dolor 坐 amet</div><!-- end .mqc_info -->
<div class="m-item"><div class="m-card-light"><div class="mqc_img"><img src="http://placehold.it/280x210"></div><!-- end .mqc_img --><div class="mqc_info"><h5>标题</h5>Lorem ipsum dolor 坐 amet</div><!-- end .mqc_info -->
<div class="m-item"><div class="m-card-light"><div class="mqc_img"><img src="http://placehold.it/280x210"></div><!-- end .mqc_img --><div class="mqc_info"><h5>标题</h5>Lorem ipsum dolor 坐 amet</div><!-- end .mqc_info -->
<div class="m-item"><div class="m-card-light"><div class="mqc_img"><img src="http://placehold.it/280x210"></div><!-- end .mqc_img --><div class="mqc_info"><h5>标题</h5>Lorem ipsum dolor 坐 amet</div><!-- end .mqc_info -->
<div class="m-item"><div class="m-card-light"><div class="mqc_img"><img src="http://placehold.it/280x210"></div><!-- end .mqc_img --><div class="mqc_info"><h5>标题</h5>Lorem ipsum dolor 坐 amet</div><!-- end .mqc_info -->
<div class="m-item"><div class="m-card-light"><div class="mqc_img"><img src="http://placehold.it/280x210"></div><!-- end .mqc_img --><div class="mqc_info"><h5>标题</h5>Lorem ipsum dolor 坐 amet</div><!-- end .mqc_info -->
<div class="m-item"><div class="m-card-light"><div class="mqc_img"><img src="http://placehold.it/280x210"></div><!-- end .mqc_img --><div class="mqc_info"><h5>标题</h5>Lorem ipsum dolor 坐 amet</div><!-- end .mqc_info -->
</div><!-- end .m-carousel-inner -->
谢谢.
解决方案
喜欢这个吗?
$('.m-carousel-inner').find('img:first');
小提琴
见:first
第一部分 $('.m-carousel-inner') 是容器元素的选择器，类 .m-carousel-inner 将返回 jquery包装的 DOM 元素，并应用 .find('img:first') 找到 img 的第一个实例作为其任何级别的子元素.
I have this div with a bunch of other divs and images. The main div is m-carousel-inner. What I want to do is select the first img element within this div. How would I go about doing this in javascript or jquery?
<div class="m-carousel-inner">
<div class="m-item">
<div class="m-card-light">
<div class="mqc_img">
<img src="http://placehold.it/280x210">
</div><!-- end .mqc_img -->
<div class="mqc_info">
<h5>Title</h5>
Lorem ipsum dolor sit amet
</div><!-- end .mqc_info -->
</div>
</div>
<div class="m-item">
<div class="m-card-light">
<div class="mqc_img">
<img src="http://placehold.it/280x210">
</div><!-- end .mqc_img -->
<div class="mqc_info">
<h5>Title</h5>
Lorem ipsum dolor sit amet
</div><!-- end .mqc_info -->
</div>
</div>
<div class="m-item">
<a href="#">
<div class="m-card-light">
<div class="mqc_img">
<img src="http://placehold.it/280x210">
</div><!-- end .mqc_img -->
<div class="mqc_info">
<h5>Title</h5>
Lorem ipsum dolor sit amet
</div><!-- end .mqc_info -->
</div>
</a>
</div>
<div class="m-item">
<div class="m-card-light">
<div class="mqc_img">
<img src="http://placehold.it/280x210">
</div><!-- end .mqc_img -->
<div class="mqc_info">
<h5>Title</h5>
Lorem ipsum dolor sit amet
</div><!-- end .mqc_info -->
</div>
</div>
<div class="m-item">
<div class="m-card-light">
<div class="mqc_img">
<img src="http://placehold.it/280x210">
</div><!-- end .mqc_img -->
<div class="mqc_info">
<h5>Title</h5>
Lorem ipsum dolor sit amet
</div><!-- end .mqc_info -->
</div>
</div>
<div class="m-item">
<div class="m-card-light">
<div class="mqc_img">
<img src="http://placehold.it/280x210">
</div><!-- end .mqc_img -->
<div class="mqc_info">
<h5>Title</h5>
Lorem ipsum dolor sit amet
</div><!-- end .mqc_info -->
</div>
</div>
<div class="m-item">
<div class="m-card-light">
<div class="mqc_img">
<img src="http://placehold.it/280x210">
</div><!-- end .mqc_img -->
<div class="mqc_info">
<h5>Title</h5>
Lorem ipsum dolor sit amet
</div><!-- end .mqc_info -->
</div>
</div>
<div class="m-item">
<div class="m-card-light">
<div class="mqc_img">
<img src="http://placehold.it/280x210">
</div><!-- end .mqc_img -->
<div class="mqc_info">
<h5>Title</h5>
Lorem ipsum dolor sit amet
</div><!-- end .mqc_info -->
</div>
</div>
<div class="m-item">
<div class="m-card-light">
<div class="mqc_img">
<img src="http://placehold.it/280x210">
</div><!-- end .mqc_img -->
<div class="mqc_info">
<h5>Title</h5>
Lorem ipsum dolor sit amet
</div><!-- end .mqc_info -->
</div>
</div>
<div class="m-item">
<div class="m-card-light">
<div class="mqc_img">
<img src="http://placehold.it/280x210">
</div><!-- end .mqc_img -->
<div class="mqc_info">
<h5>Title</h5>
Lorem ipsum dolor sit amet
</div><!-- end .mqc_info -->
</div>
</div>
<div class="m-item">
<div class="m-card-light">
<div class="mqc_img">
<img src="http://placehold.it/280x210">
</div><!-- end .mqc_img -->
<div class="mqc_info">
<h5>Title</h5>
Lorem ipsum dolor sit amet
</div><!-- end .mqc_info -->
</div>
</div>
</div><!-- end .m-carousel-inner -->
Thank you.
解决方案
Like this?
$('.m-carousel-inner').find('img:first');
Fiddle
See :first
First part $('.m-carousel-inner') is the selector for your container element with class .m-carousel-inner which will return the jquery wrapped DOM element, and apply .find('img:first') to find the first instance of img as its child at any level.
这篇关于我将如何使用 jquery 选择此 div 中的第一张图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
