How to select the first div inside the element selected by the $(this) JQuery selector?

Question

into a JSP page I have something like this:

<!-- 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 am pretty new in JQuery and I have the following situation:

As you can see I have the a tag having id="showWifi_${item.index}" where the item.index is a value generated by a more external iteration.

In this page I have this JQuery script:

$(".showWifi").click(function(event){

    clickedButton = this.id;      

    splitButtonId = clickedButton.split("_"); 

    idToShow = "progettiWifi_" + splitButtonId[1];
    idToHide = "progettiPnsd_" + splitButtonId[1];

    document.getElementById(idToShow).style.display = 'block';
    document.getElementById(idToHide).style.display = 'none';

    //$(this).addClass("highLightButton");

    $('a.showWifi div').first().addClass('highLightButton');
    $('a.showPnsd div').first().removeClass('highLightButton');


});

The last 2 rows select the first div inside the a tag having showWifi as class. The problem is that I have to replace these lines using the first div inside the **$(this) element that represent the clicked element.

How can I do this thing?

Answer 1

In case you have more than one divs inside <a>, you can use the following code to get the first div.

$(this).find('div').first().addClass('highLightButton');

Please check this solution: How can I use JQuery to select the first div element inside a container element?

Answer 2

Since you have only one div within .showWifi you do not need first()

 $(this).find('div').addClass('highLightButton');

Answer 3

Try this:

$(this).children('div:first').addClass('highLightButton');
$(this).children('div:first').removeClass('highLightButton');

More info: https://api.jquery.com/first-selector/