jqueryでこのdivの最初の画像を選択するにはどうすればよいですか？

Question

私はこのdivを他のdivや画像と一緒に持っています。メインディビジョンはmカルーセルインナーです。私がしたいことは、この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'); 

Fiddle

:first

最初の部分$('.m-carousel-inner')はjQueryのDOM要素を包み返しますクラス.m-carousel-innerを使用してコンテナ要素のセレクタで、見つけること.find('img:first')を適用するを参照してください。どのレベルでも子としてのimgの最初のインスタンス。 jqueryの中

Answer 2

あなたでし

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

Answer 3

あなたはまた、jQueryのセレクタでjQueryの first()機能を使用することができます

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