1

Esse código é para criar um lista dos posts do blogger em ordem alfabética. É exibido o titulo e a imagem do post.
Eu alterei esse código para mudar a posição da imagem e do titulo e criar class, a imagem aparecia depois do titulo, tudo fica em uma unica linha, texto e imagem.
Porém depois da mudança a lista deixou de ser em ordem alfabética, eu não consegui identificar o erro, ainda estou aprendendo javascript.

Essa é a parte que eu alterei:

          a1E.href = url;
          a1E.textContent = title;
          a1E.className += "aclass";
          postImage.src = imageThumb;
          postImage.className += "imclass"; 
          liE.appendChild(postImage);
          liE.appendChild(a1E);


Antes de alterar:

              a1E.href = url;
              a1E.textContent = title;
              postImage.src = imageThumb;
              liE.appendChild(a1E);
              liE.appendChild(postImage);


codigo completo:

  var startIndex = 1;
  var maxResults = 150;
  var allResults = [];
  function sendQuery12()
  {
    var scpt = document.createElement("script");
    scpt.src = "/feeds/posts/summary/-/Series?alt=json&callback=processPostList13&start-index=" + startIndex + "&max-results=" + maxResults;
    document.body.appendChild(scpt);
  }
  function printArrayResults(root)
  { 
    //Sort Alphebetically
    allResults.sort(function(a, b){
      var a_string = a.children[0].textContent ;
      var b_string = b.children[0].textContent ;
      if(a_string < b_string) return -1;
      if(a_string > b_string) return 1;
      return 0;
    })
    var elmt = document.getElementById("postList13");
    for (index = 0; index < allResults.length; index++) {
      elmt.appendChild(allResults[index]);
    }
  }
  function processPostList13(root)
  {   
    var elmt = document.getElementById("postList13");
    if (!elmt)
      return;
    var feed = root.feed;
    if (feed.entry.length > 0)
    {
      for (var i = 0; i < feed.entry.length; i++)
      {
        var entry = feed.entry[i];
        var title = entry.title.$t;
        var date = entry.published.$t;

        if( entry.media$thumbnail != undefined ){
          var imageThumb = entry.media$thumbnail.url ;
        } else {
          var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
        }

        for (var j = 0; j < entry.link.length; j++)
        {
          if (entry.link[j].rel == "alternate")
          {
            var url = entry.link[j].href;
            if (url && url.length > 0 && title && title.length > 0)
            {
              var liE = document.createElement("li");
              var a1E = document.createElement("a");
              var postImage = document.createElement("img");

              a1E.href = url;
              a1E.textContent = title;
              a1E.className += "aclass";
              postImage.src = imageThumb;
              postImage.className += "imclass";

              liE.appendChild(postImage);
              liE.appendChild(a1E);



              //elmt.appendChild(liE);
              allResults.push(liE);

            }
            break;
          }
        }
      }
      if (feed.entry.length >= maxResults)
      {
        startIndex += maxResults;
        sendQuery12();
      } else {
        printArrayResults();
      }
    }
  }
  sendQuery12();

HTML: <div><ul id="postList13"></ul></div>

4
  • As <li> que vc está criando estão dentro de uma <ul>?
    – Meu ovo
    28/06/2018 às 17:29
  • Sim está, eu coloquei o html errado, vou arrumar
    – user117425
    28/06/2018 às 17:35
  • Não seria postList13 a id, como está no código?
    – Meu ovo
    28/06/2018 às 17:37
  • Sim, coloquei errado de novo, agora está tudo certo
    – user117425
    28/06/2018 às 17:38

1 Resposta 1

1

Conforme respondi neste post, você consegue reordenar as <li> em ordem alfabética usando .map(), .sort() e .filter(). O código abaixo irá fazer o trabalho, substituindo o HTML da lista por uma nova lista ordenada. Coloque-o após o for onde você está criando as <li>:

var lis = elmt.querySelectorAll("li"); // seleciona as LIs
var ordenada = ''; // crio uma variável vazia que será usada para construir uma nova lista ordenada

[].map.call(lis, function(a){ // mapeio as LIs retornando o HTML
   return a.textContent+a.outerHTML; // coloco o texto no início da LI
}).sort().filter(function(a){ // ordeno com .sort()
   ordenada += a.match(/<li>.*<\/li>/); // pego apenas a LI e concateno
});

elmt.innerHTML = ordenada; // substituo o conteúdo da UL pelos novos LIs ordenados
8
  • Eu mudei aqui, mas acho que fiz alguma coisa errada, porque não funcionou, pode me mandar com o código completo por favor? se possivel mantenha os comentarios
    – user117425
    28/06/2018 às 17:45
  • Eu realmente estava fazendo errado, acabei colocando dentro de for
    – user117425
    28/06/2018 às 17:51
  • Não funcionou, link do código em funcionamento no blogger: testenextdark.blogspot.com/p/teste.html
    – user117425
    28/06/2018 às 17:59
  • Muito obrigado.
    – user117425
    28/06/2018 às 18:10
  • Eu achei que tinha funcionado, mas acho que foi só um problema com o loading da pagina, quando recarreguei a pagina, continuou fora de ordem, mas obrigado por ajudar
    – user117425
    28/06/2018 às 18:46

Você deve fazer log-in para responder a esta pergunta.