Tudo bom?
Estou um requisição e tratando a resposta de um json e usando essa resposta para criar LIs em uma lista.
$.getJSON("www.exemplo.com/json.php", function(data){
for (let i = 0; i < data.length; i++) {
$('#minha-ul').append(`<li class="minha-li" id="minha-li-${data[i]['id']}">${data[i]['nome']}</li>`);
}
});Isso funciona sem problemas.
O problema acontece quando tento acessar um elemento qualquer dessa lista, com o seletor (classe) '.minha-li'. Todas as lis tem essa classe.
Ao colocar um console.log($('.minha-li'));, o console retorna r.fn.init(0).
Fiz esse código de exemplo, que da o mesmo problema. (quando uso um json pequeno, de uns 10 elementos, funciona normalmente).
<html>
<head>
<meta charset="utf-8">
<title>teste</title>
</head>
<body>
<h1>Um titulo qualquer</h1>
<ul id="minha-ul">
<!-- As LIs serão criadas via jQuery -->
</ul>
<script src="js/jquery.js"></script>
<script>
$(function(){
geraLi();
console.log($('.minha-li'));
});
function geraLi(){
$.getJSON("www.exemplo.com/json.php", function(data){
for (let i = 0; i < data.length; i++) {
$('#minha-ul').append(`<li class="minha-li" id="minha-li-${data[i]['id']}">${data[i]['nome']}</li>`);
}
});
}
</script>
</body>
</html>Pelo que li a respeito, estou tentando acessar um elemento antes que ele tenha sido criado no DOM e que a solução seria usar o $(document).ready(function(){...} ou, no jQuery $(function(){}); Contudo, como podem ver no código, eu estou usando e mesmo assim não dá. Acabei resolvendo com um setTimeout, que só pro meu teste resolve, mas ta errado.
Como faço pra "mandar" o script "esperar" o DOM (assumindo que seja isso mesmo).
Muito obrigado.
