10

この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 -->

ありがとうございました。

4

3 に答える 3

25

このような?

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

フィドル

参照:最初

最初の部分は、jquery でラップされた DOM 要素を返す$('.m-carousel-inner')クラスを持つコンテナー要素のセレクターであり、任意のレベルでその子として img の最初のインスタンスを見つけるために適用されます。.m-carousel-inner.find('img:first')

于 2013-07-11T19:57:20.217 に答える
2

first()jQueryセレクターでjQuery関数を使用することもできます

<script> $('.m-carousel-inner img').first(); </script>
于 2014-04-14T08:50:40.097 に答える
2

jqueryでできること

<script>$('.m-carousel-inner img:first');</script>
于 2013-07-11T19:59:43.170 に答える