JQuery 1.11.3 - Code does not work inside function loaded in $ (document) .ready only if inserted directly

EDITION # 1

I discovered that the code was not working because this snippet of JQuery code is inside a function like this:

var minhaFuncao = function(){
    var tbASP = [];
    var tbID = [];

    $(".portlet-body").find("div").each(function () {
        tbID.push("#" + $(this).attr("id"));
        tbASP.push($(this).data("asp"));
    });    
};

Only after I do:

$ (function () {     my function(); });

This does not work!

The output of console.log is:

[]
    length: 0
    __proto__: Array []

But if I put it like this:

$(function(){
    var tbASP = [];
    var tbID = [];

    $(".portlet-body").find("div").each(function () {
        tbID.push("#" + $(this).attr("id"));
        tbASP.push($(this).data("asp"));
    });
});

The output of console.log is

[…]
    0: "#faixa-de-valor"
    1: "#ano-de-contratacao"
    length: 2
    __proto__: Array []

Is there anything I can do to not have to get the code inside the function to insert directly into $(document).ready ?

Original I have a page with HTML portlets where HighchartsJS graphics are rendered.

The basic structure of the page is as follows:

<div class="col-sm-12">
   <div id="ano-de-contratacao-portlet" class="portlet">
      <div class="portlet-title">
         <div class="caption caption-green">
            <i class="fa fa-bookmark-o"></i>
            <span class="caption-subject text-uppercase"> Contratos Ativos - Por Ano de Contratação</span>
         </div>
         <div class="actions">
         </div>
      </div>
      <div class="portlet-body">
         <div id="ano-de-contratacao" data-tipo="<%=TipoRelatorios%>" data-asp="tbCarteiraAtivo_Assinatura" class="simples"></div>
      </div>
   </div>
</div>
<div class="col-sm-12">
   <div id="origem-de-recurso-portlet" class="portlet">
      <div class="portlet-title">
         <div class="caption caption-green">
            <i class="fa fa-bookmark-o"></i>
            <span class="caption-subject text-uppercase"> Contratos Ativos - Por Origem de Recurso</span>
         </div>
         <div class="actions">
         </div>
      </div>
      <div class="portlet-body">
         <div id="origem-de-recurso" data-tipo="<%=TipoRelatorios%>" data-asp="tbCarteiraAtiva_Origem_Recurso" class="simples"></div>
      </div>
   </div>
</div>

This HTML structure repeats itself. I'm using Classic ASP and Bootstrap 4, in addition to JQuery 1.11.3.

HTML descriptive structure:

Coluna Bootstrap -> Uma DIV contêiner para o portlet (.portlet) -> Corpo do portlet (.portlet-body) -> DIV contêiner do gráfico

I'd like to get the IDs and value of the data-asp properties of the DIVs from the graphs using JQuery.

For this I've tried the following:

var tbASP = [];
var tbID = [];

$(".portlet-body").find("div").each(function () {
    tbID.push("#" + $(this).attr("id"));
    tbASP.push($(this).data("asp"));
});

The array tbID , for example, always returns with length 0 or length 15 (which is the number of page portlets only with undefined values depending on the setting I put. p>

I have read the documentation on the JQuery website for .find () , and in the W3School site >, but I could not resolve it.

.push

I checked some StackOverflow pages, but I was not successful:

How to store in Array the parent IDs of elements with the same CLASS and display in alert these stored IDs : I confess that this one I did not understand the answer.

I researched other links on the job that I do not remember right now.