Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Adicionar Class

2 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery

Ir para baixo

Tópico resolvido Adicionar Class

Mensagem por Don Corleone 02.11.17 17:57

Detalhes da questão


Endereço do fórum: http://somosmugiwara.forumeiros.com
Versão do fórum: PunBB

Descrição


Utilizo o código abaixo para adicionar classes em diferentes tipos de títulos e assim personalizar cada u de uma forma diferente. Gostaria de saber se dar para fazer um parecido, mas que adicione na ID.

Código:

(function($) {
  'use strict';
 
  $(function() {
      $('.boxfmvi .main-head .page-title h2').each(function() {
        var $this = $(this);
       
        var name = $this
            .text()
            .toLowerCase()
            .normalize('NFD')
            .replace(/[\u0300-\u036f]/g, '')           
            .replace(/[^a-z0-9]+/gi, '-')
            .replace(/^-|-$/gi, '')
        ;
       
        $this.closest('.main-head').addClass('main-head-' + name);
      });
  });
}(jQuery));


Última edição por Connor R. em 02.11.17 23:43, editado 1 vez(es)
Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Luiz 02.11.17 18:44

Troque por este:
Código:
(function($) {
  'use strict';

  $(function() {
    $('.boxfmvi .main-head .page-title h2').each(function() {
      var $this = $(this);

      var name = $this
        .text()
        .toLowerCase()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .replace(/[^a-z0-9]+/gi, '-')
        .replace(/^-|-$/gi, '');

      $this
        .closest('.main-head')
        .attr('id', 'main-head-' + name)
      ;
    });
  });
}(jQuery));
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Don Corleone 02.11.17 18:55

Olá, tentei modificar mas não surtiu efeito....
Veja abaixo o que quero fazer.
Adicionar Class 4ubj2qU

Quero que todos os span dentro da Li "atli" tenham acrescido no ID o número 00...

Página onde estou testando, http://somosmugiwara.forumeiros.com/h87-
Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Luiz 02.11.17 20:44

Isso é meio complicado de ser feito, tendo em vista que nem todos tem a mesma estrutura.
Mas eu consegui criar um script que cria um ID único para cada item de lista ( <li> ).

Lembre-se de adicionar o script como um callback após a ação AJAX ser executada. Caso contrário não irá resultar.

Código:
Código:
(function ($) {
  'use strict';

  $(function () {
    $('ul').each(function (ulPreIndex, ul) {
      var $li = $(this).find('li');

      $li.each(function (liPreIndex, li) {

        var liIndex = liPreIndex + 1;
        var ulIndex = ulPreIndex + 1;

        $(this).attr('id', ulIndex + '-list-item-' + liIndex);
      });
    });
  });
})(jQuery);

o/
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Don Corleone 02.11.17 21:45

Não precisa ser um id único para cada li, pois o que quero é que cada span dentro da li tenha adicionado em sua id um 00. Quanto a essa questão do callback não entendi, sou meio leigo ainda em javascript.. Pode dar um exemplo?
Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Luiz 02.11.17 21:47

No contexto da minha mensagem acima, callback é o momento após a ação AJAX ser executada e os elementos carregados na tela.
Não precisa ser um id único para cada li, pois o que quero é que cada span dentro da li tenha adicionado em sua id um 00.
Não entendi isso.
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Don Corleone 02.11.17 21:52

Vou tentar exemplificar, kkk.

No momento está assim:
Código:
<li class="atli"><span>Bloqueio | Defesa:</span><span id="block">08</span><span class="brassa">(+7 Bônus de Raça)</span></li>

Quero que fique assim.
Código:
<li class="atli"><span>Bloqueio | Defesa:</span><span id="block00">08</span><span class="brassa">(+7 Bônus de Raça)</span></li>

Note que na ID block foi acrescido o 00, ficando assim: block00
Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Luiz 02.11.17 21:58

Aqui o JavaScript:
Código:
(function ($) {
  'use strict';

  $(function () {
    $('[id]').each(function () {
      $(this).attr('id', $(this).attr('id') + '00');
    });
  });
}(jQuery));

Resultado na estrutura do DOM:
-> http://prntscr.com/h5hf9d.

o/
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Don Corleone 02.11.17 22:07

Tem como colocar o código para funcionar por último?
Pois ele carrega primeiro que outros itens, fazendo com que algumas ID não seja acrescentado o 00.
Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Luiz 02.11.17 22:14

Qual o código de sua página?
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Don Corleone 02.11.17 22:15

Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Luiz 02.11.17 22:29

Esse é o mesmo código do seu outro tópico?
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Don Corleone 02.11.17 22:35

Sim isso, ambos funcionaram juntos.
Mas já notei um problemas, pois um código precisa ser carregado primeiro, assim puxando as informações e posteriormente deve ser executado o código de adicionar o 00 no ID....
Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Luiz 02.11.17 22:35

Certo. Vamos resolver o outro tópico primeiro para prosseguirmos à este, tudo bem? o/
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Don Corleone 02.11.17 22:36

ok tudo certo.
Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Luiz 02.11.17 23:26

Tente trocar o código de sua página por:
Código:
<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Título da Página</title>
 
  <!-- Bootstrap's CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
</head>
<body>
 
  <div class="container">
    <form class="links-form pre-ajax-content">
      <fieldset>
        <legend class="mb-4">Por favor, coloque os <em>links</em> abaixo:</legend>
       
        <div class="form-group">
          <label for="link-1">Link 1:</label>
          <input type="url" id="link-1" class="form-control" required />
        </div>
        <div class="form-group">
          <label for="link-2">Link 2:</label>
          <input type="url" id="link-2" class="form-control" required />
        </div>
        <div class="form-group">
          <button type="submit" id="submit" class="btn btn-primary">Próximo</button>
        </div>
      </fieldset>
    </form>
   
    <div class="ajax-content" style="display: none;">
      <div class="row">
        <div id="conteudo" class="col conteudo"></div>
        <div id="conteudo2" class="col conteudo2"></div>
      </div>
    </div>
  </div>
 
  <!-- Script's. Colocar todo o HTML acima deste comentário. -->
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script>
    (function ($) {
      'use strict';

      var doStuff = function (selector, link) {
        $.post(link)
          .done(function (context) {
            alert('O conteúdo será carregado agora...');
           
            var $content = $('#atrificha', context);

            $(selector).html($content);

            $('[id]').each(function () {
              $(this).attr('id', $(this).attr('id') + '00');
            });
          })
        ;
      };
 
      $(function () {
        $('.links-form').on('submit', function (event) {
          event.preventDefault();
         
          $('.pre-ajax-content').hide();
          $('.ajax-content').show();
 
          var link1 = $('#link-1').val();
          var link2 = $('#link-2').val();
 
          $('#conteudo').load(link1 + ' #atrificha', function () {
            doStuff('#conteudo', link1);
          });
 
          $('#conteudo2').load(link2 + ' #atrificha', function () {
            doStuff('#conteudo2', link2);
          });
        });
      });
    }(jQuery));
  </script>
</body>
</html>
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Don Corleone 02.11.17 23:33

Aqui poderia ser o seguinte.

As ID do link 1 seria acrescida o 00 e as ID do link 2 seria acrescida 01.

Testei o código que você passou, está adicionando 0000. Mas poderia ser do jeito que pedi acima.
Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Luiz 02.11.17 23:37

Troque por:
Código:
<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Título da Página</title>
 
  <!-- Bootstrap's CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
</head>
<body>
 
  <div class="container">
    <form class="links-form pre-ajax-content">
      <fieldset>
        <legend class="mb-4">Por favor, coloque os <em>links</em> abaixo:</legend>
       
        <div class="form-group">
          <label for="link-1">Link 1:</label>
          <input type="url" id="link-1" class="form-control" required />
        </div>
        <div class="form-group">
          <label for="link-2">Link 2:</label>
          <input type="url" id="link-2" class="form-control" required />
        </div>
        <div class="form-group">
          <button type="submit" id="submit" class="btn btn-primary">Próximo</button>
        </div>
      </fieldset>
    </form>
   
    <div class="ajax-content" style="display: none;">
      <div class="row">
        <div id="conteudo" class="col conteudo"></div>
        <div id="conteudo2" class="col conteudo2"></div>
      </div>
    </div>
  </div>
 
  <!-- Script's. Colocar todo o HTML acima deste comentário. -->
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script>
    (function ($) {
      'use strict';
 
      var doAJAX = function (selector, link, fn) {
        $.post(link)
          .done(function (context) {
            alert('O conteúdo será carregado agora...');
           
            var $content = $('#atrificha', context);
 
            $(selector).html($content);

            if (fn && typeof(fn) === 'function') {
              fn();
            }
          })
        ;
      };
 
      $(function () {
        $('.links-form').on('submit', function (event) {
          event.preventDefault();
         
          $('.pre-ajax-content').hide();
          $('.ajax-content').show();
 
          var link1 = $('#link-1').val();
          var link2 = $('#link-2').val();
 
          $('#conteudo').load(link1 + ' #atrificha', function () {
            doAJAX('#conteudo', link1);
          });
 
          $('#conteudo2').load(link2 + ' #atrificha', function () {
            doAJAX('#conteudo2', link2, function () {
              $('[id]').each(function (index, el) {
                $(this).attr('id', $(this).attr('id') + '0' + index);
              });
            });
          });
        });
      });
    }(jQuery));
  </script>
</body>
</html>
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Don Corleone 02.11.17 23:42

Ficou muito bom mano, és censurado.

Thanks.
Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar Class

Mensagem por Luiz 02.11.17 23:44

o/

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery

 
Permissões neste sub-fórum
Não podes responder a tópicos