How can I use JQuery to select the first div element inside a container element?

Question

I am pretty new in JQuery and I have the following situation:

<!-- Bottone relativo ai progetti WIFI: -->
<a title="WIFI" href="javascript: void(0)" id="showWifi_${item.index}" class="showWifi">
    <div class="news_box news_box_01 hvr-underline-from-center " style="margin-right: 50px;"></div>
</a>

I have the a tag having class="showWifi".

I have to use JQuery to select the first div element inside this a tag having class="showWifi".

I don't want set an id to this tag, but I want use the JQuery syntax to select the first div tag

How can I do this?

score 3 · Accepted Answer · edited May 23 '17 at 12:14

3

You can use first()

$('a.showWifi div').first().addClass('something')

You can also use :first pseudo-selector

$('a.showWifi div:first').addClass('something')

Note: first() is faster than :first(Thanks to @Zeratops). See: jQuery :first vs. .first()

edited May 23 '17 at 12:14

Community

1
1

answered Sep 10 '15 at 09:32

Tushar

85,780
21
159
179

If we go further, for performance matters, `.first()` is better (related to this SO answers on "who is faster between `:first` or ``.first()` : http://stackoverflow.com/questions/2312761/jquery-first-vs-first/14757072#14757072). – Anwar Sep 10 '15 at 09:37
@Zeratops Thanks, Updated answer – Tushar Sep 10 '15 at 09:40

score 1 · Answer 2 · answered Sep 10 '15 at 09:32

1

You can use :first

Selects the first matched element.

$('a.showWifi > div:first')

answered Sep 10 '15 at 09:32

Satpal

132,252
13
159
168

score 1 · Answer 3 · answered Sep 10 '15 at 09:33

1

Use .first()

$(".showWifi").find("div").first();

Working JSFIDDLE: http://jsfiddle.net/uamkvdkr/

answered Sep 10 '15 at 09:33

Rajan Goswami

769
1
5
17

How can I use JQuery to select the first div element inside a container element?

3 Answers3

Linked