First Child is not selected

Question

I have the following code that generates a slider but the property first-Child does not work. What’s the problem?

var elementoSlider = $('#dados-slider');
  var mostraImagem = "";
  var mostraDadosImagem = "";
 $('ul.slider li:first-child').addClass('slider-active');
  $.ajax({
    url: urlBase + "loja/slider",
    method: 'GET'
  }).done(function(retorno)
  {

    mostraImagem += "<ul id='sliders' class='slider'>";
    retorno.data.forEach(function(item)
    {
      mostraDadosImagem = "<li><img src='" + urlBase  + "imagem/slide/" + item.loja_slider_id + "/jpg' alt='Imagem Slider' title='Imagem Slider' class='imagem-slider' /><h1>Nome da Loja</h1></li>";
      mostraImagem += mostraDadosImagem;
    })

    mostraImagem += "</ul>";

    elementoSlider.html(mostraImagem);

  }).fail(function(data)
  {
    console.log("Erro de slider");
  });      
});

Answer 1

The problem is that you add the class on the line:

 $('ul.slider li:first-child').addClass('slider-active');

But right away, you run Ajax and rebuild Slider’s html, thus replacing what you just did:

elementoSlider.html(mostraImagem);

I suggest the following amendment:

var elementoSlider = $('#dados-slider');
  var mostraImagem = "";
  var mostraDadosImagem = "";
  $.ajax({
    url: urlBase + "loja/slider",
    method: 'GET'
  }).done(function(retorno)
  {

    mostraImagem += "<ul id='sliders' class='slider'>";
    retorno.data.forEach(function(item)
    {
      mostraDadosImagem = "<li><img src='" + urlBase  + "imagem/slide/" + item.loja_slider_id + "/jpg' alt='Imagem Slider' title='Imagem Slider' class='imagem-slider' /><h1>Nome da Loja</h1></li>";
      mostraImagem += mostraDadosImagem;
    })

    mostraImagem += "</ul>";

    elementoSlider.html(mostraImagem);
    $('ul.slider li:first-child').addClass('slider-active');

  }).fail(function(data)
  {
    console.log("Erro de slider");
  });      
});