First Child is not selected

1

I have the following code that generates a dynamic slider , but the first-child property does not work. What is 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");
  });      
});
    
asked by anonymous 23.08.2017 / 20:44

1 answer

0

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

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

But soon after, you run Ajax and rebuild the Slider html, thus replacing what you just did:

elementoSlider.html(mostraImagem);

I suggest the following change:

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");
  });      
});
    
23.08.2017 / 20:52