0

tengo una función llamada init() que se encarga de crear todos los elementos de una página con jQuery, entre otros esta parte:

$('.suggestions__content').append(
  `<li class="suggestions__item ${selecionado > 0 ? 'box-check' : ''}" idSKU="${id}">${this.buildContentItem(
    item
  )}</li>`
)

Lo que quiero hacer es poder seleccionar esos desde otra función cuando ya esa función haya terminado de crear todos los elementos para poder utilizarlos,

ej:

function otherFunction(){
       const elementosHtml = $('.suggestions__item')
       console.log(elementosHtml)
}

Cuando llame a la función me imprima en consola y pueda obtener sus atributos, si la llamo normalmente imprime el selector, pero no trae los elementos, no los encuentra porque presumo, no se han añadido al documento

1
  • No entiendo tu problema, a mi si mie funciona tu codigo. Obtengo una lista de los elementos creados por append
    – Yussef
    el 13 sep. 2022 a las 23:25

2 respuestas 2

0

Si el problema es que no e han renderizado (creado o cargado en el DOM), como tu dices, intenta usar $(document).ready para cerciorate de que todo el contenido ha sido cargado y creado.

function otherFunction(){
    // dentro de esta funcion debes de poder usar los selectores y obtener el array de objetos
    // const elementosHtml = $('.suggestions__item')
    // console.log(elementosHtml)
    alert();
}

// $(document).ready espera a que todo el DOM sea cargado y creado
$(document).ready( function(){
    otherFunction();
});
0

Te propongo este ejemplo en el que primero se agregan elementos al <ul> y posteriormente se ejecuta tu segunda función.

Debes adaptar el ejemplo a tu código ya que no proporcionaste el contexto completo.

El snippet toma un par de segundos en ejecutarse.

//Ejecutar la función init() al cargar la pagina
init();

//Declaración de la función init()
function init() {
  //Modifica esta parte con tu código
  $('.suggestions__content').append('<li class="suggestions__item">1</li>');
  $('.suggestions__content').append('<li class="suggestions__item">2</li>');
  $('.suggestions__content').append('<li class="suggestions__item">3</li>');
  //Ejecutar la función otherFunction() después de agregar los <li>
  otherFunction();
}

//Declaración de la función otherFunction()
function otherFunction() {
  const elementosHtml = $('.suggestions__item')
  console.log(elementosHtml)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="suggestions__content"></ul>

Otra opción que tienes disponible es usar async y await, pero te lo dejo de consulta, creo que en la comuindad hay varios ejemplos.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.