Jquery 1.11.3 - Code does not work within $(Document) loaded function. ready only if inserted directly

Question

ISSUE #1

I discovered that the code was not working, because this chunk 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 name(); });

That doesn’t work!

The exit of console.log is:

[]
    length: 0
    __proto__: Array []

But if I put it like that:

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

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

The exit 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 take the code out of 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 am using ASP Classic and Bootstrap 4, as well as Jquery 1.11.3.

Descriptive structure of HTML:

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

I would like to take the Ids and the value of the properties data-asp of DIV graphics containers using Jquery.

For that I 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 length 0 or length 15 (which is the number of portlets of the page only with the values undefined, depending on the configuration I set.

I read the documentation on the Jquery website for .each(), .map() and .find(), and, on the website W3school .push(), but I couldn’t solve.

I checked a few pages of Stackoverflow, but I was unsuccessful:

Getting ID of all Elements of a Certain class into an array

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 at work that I don’t remember now.