如何使用jquery選擇此div中的第一個圖像？

Question

我有一堆其他div和圖像的div。 主要的div是m-carousel-inner。 我想要做的是選擇這個div中的第一個img元素。 我將如何在javascript或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 -->

謝謝。

Answer 1

像這樣？

$('.m-carousel-inner').find('img:first');

小提琴

見：第一

第一部分$('.m-carousel-inner')是容器元素的選擇器，類為.m-carousel-inner ，它將返回jquery包裝的DOM元素，並應用.find('img:first')來查找img作為其子級的第一個實例。

Answer 2

在jquery你可以

<script>$('.m-carousel-inner img:first');</script>

Answer 3

你也可以使用jQuery first()函數和jQuery選擇器

<script> $('.m-carousel-inner img').first(); </script>