Change DIV via jQuery

Question

Change DIV via jQuery

Navigation

#1 by (4 votes)
#2 by (2 votes)

0

I have a div with a class and when the screen gets in 770px I have a code that changes that class. I would like to additionally change the class name to change it's position, display it in another div, how could I do it by jQuery?

Example

window.addEventListener('resize', function () {
    var largura = window.innerWidth;

    if (largura < 750) 
        document.getElementsByClassName('carrinho.desktop')[0].className = 'carrinho.mobile';
});

Then this cart.mobile I would like to put inside another div, relocating it from place

Example of change

<div class="Onde a div está/Carrinho desktop">
   <div class="classe que altera com o pixel"></div>
</div>

<div class="Para onde eu quero que vá a div/Carrinho mobile">
   <div class="quando a classe alterar vir pra cá"></div>
</div>

If anyone wants to know how it was:

$j(window).resize(function() {
    windowsize = $j(window).width();
if (windowsize <= 769) {
        $j('.carrinho-cheio-mobile').replaceWith($j('.mini-cart-content.dropdown-content.left-hand.skip-content.skip-content-.-style.block-cart.block').clone());;
    }
})

html jquery

asked by anonymous 22.09.2017 / 19:58

2 answers

4

Would that be?

function resize(){
  if (largura < 750) {
       $('.carrinhoDesktop').attr('class', 'carrinhoMobile');
       var carrinho = $('.carrinhoMobile');
       $('.carrinhoMobile').remove();
       $('.mobile').append(carrinho);
  }else{
			if($('.carrinhoMobile').length != 0){
        $('.carrinhoMobile').attr('class', 'carrinhoDesktop');
        var carrinho = $('.carrinhoDesktop');
        $('.carrinhoDesktop').remove();
        $('.desktop').append(carrinho);
      }	
  }
}
var largura = window.innerWidth;

resize(largura);

window.addEventListener('resize', function () {
largura = window.innerWidth;
resize(largura);
});

. {
  background-color: yellow;
  display: block;
}
.carrinhoDesktop {
  display: block;
}
.desktop {
  height: 20px;
  background: #ddd;
}
.mobile {
  height: 20px;
  background: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="desktop">
  <div class="carrinhoDesktop">carrinho</div>
</div>

<div class="mobile">

</div>

22.09.2017 / 20:32

How to know which tab is selected NullReferenceException error in join

score 2 · Accepted Answer

You can use the .replaceWith(novoConteudo) function of JQuery. novoConteudo can be a jQuery object, a Element , a string, or an Array.

For example; in the exemplified case, the code would look like this:

$('.quando-a-classe-alterar-vir-para-ca').replaceWith($('.classe-que-altera-com-o-pixel'));

If you want to keep the "desktop cart" in place, pass%% of element as parameter of .clone() :

$('.quando-a-classe-alterar-vir-pra-ca').replaceWith($('.classe-que-altera-com-o-pixel').clone());

JSFiddle