Convert a code to jquery for pure Javascript

Asked

Viewed 902 times

1

I have a jquery code that would like to convert it to pure javascript, DOM. Can anyone help me?

var mobileItems = jQuery( '#slide-out .nav-mobile .main-menu' );
mobileItems.find( 'li.menu-item-has-children' ).append( '<i class="mobile-arrows fa fa-chevron-down"></i>' );
jQuery("li.menu-item-has-children i.mobile-arrows").click(function() {
    if( jQuery( this ).hasClass( "fa-chevron-down" ) )
        jQuery( this ).removeClass( "fa-chevron-down" ).addClass( "fa-chevron-up" );
    else
        jQuery( this ).removeClass( "fa-chevron-up" ).addClass( "fa-chevron-down" );

    jQuery( this ).parent().find('ul:first').toggle();
});

var mobileItems = jQuery( '#slide-out .st-nav-mobile .main-menu' );
mobileItems.find( 'div.penci-mega-latest-posts' ).remove();
mobileItems.find( 'div.mega-cat-content-tab' ).remove();
mobileItems.find( 'div.mega-recent-post' ).remove();
mobileItems.find('.mega-cat-wrapper').unwrap();
mobileItems.find('.mega-cat-sub-categories').unwrap();
javascript jquery dom

  • Without html it is difficult. Try this way: https://pastebin.com/wwDfY2TP

  • You do not need to put the solution in the question. If the answer helped, just vote positively and accept it, as you have already done. If your solution is different from the question, you can answer the question you found.

  • Good. Vlw for the tip.

1 answer

1


I created an HTML that plays the element structure of the selectors in jQuery so you can see how it works. The code was tested both with jQuery and in the pure JS below and got the same effect. I will leave comments in the code so you can know what it does (at the end of the answer I will leave the code clean):

// Busco todos os elementos-filhos do seletor. Similar ao .find usado no jQuery
var mobileItems = document.querySelectorAll('#slide-out .nav-mobile .main-menu li.menu-item-has-children');
[].forEach.call(mobileItems, function(el){
   var i = document.createElement('i');
   i.setAttribute('class','mobile-arrows fa fa-chevron-down');
   
   // aqui eu coloquei um texto apenas como exemplo para ser clicado
   // estas duas linhas pode apagar
   var t = document.createTextNode("CLICK ME");
   i.appendChild(t);
   // apagar as duas linhas acima
   
   el.appendChild(i);
});

// Aqui eu percorro os elementos <i> e adiciono um event handler
// similar ao jQuery("li.menu-item-has-children i.mobile-arrows").click(function() {
var li_i = document.querySelectorAll('li.menu-item-has-children i.mobile-arrows');
[].forEach.call(li_i, function(el){
   el.addEventListener('click', function(){
      if(this.className.indexOf('fa-chevron-down') != -1){
         this.classList.remove("fa-chevron-down");
         this.classList.add("fa-chevron-up");
      }else{
         this.classList.remove("fa-chevron-up");
         this.classList.add("fa-chevron-down");
      }
      
      // Aqui eu altero a visibilidade do primeiro <ul> 
      // similar ao jQuery( this ).parent().find('ul:first').toggle();
      var ul = this.parentNode.querySelectorAll('ul')[0];
      ul.style.display = ul.offsetParent === null ? 'block' : 'none';

   });
});

// Aqui eu faço o desembrulho dos elementos indicados no jQuery
var mobileItems = document.querySelectorAll('#slide-out .st-nav-mobile .main-menu *');
var elpai = mobileItems[0].parentNode;
[].forEach.call(mobileItems, function(el){

   // unwrap (desembrulhar). Ao desembrulhar um elemento, todos os irmãos também são,
   // porque o elemento-pai é removido
   elpai.parentNode.appendChild(el);

   var tn = el.nodeName.toLowerCase();
   if(tn == "div" && el.className.indexOf('penci-mega-latest-posts') != -1) el.outerHTML = '';
   if(tn == "div" && el.className.indexOf('mega-cat-content-tab') != -1) el.outerHTML = '';
   if(tn == "div" && el.className.indexOf('mega-recent-post') != -1) el.outerHTML = '';
   
});

// Removendo elemento-pai do for acima
elpai.outerHTML = '';
<div id="slide-out">
   <div class="nav-mobile">
      <div class="main-menu">
         <ul>
            <li class="menu-item-has-children">
               <ul>
                  ul1
               </ul>
               <ul>
                  ul2
               </ul>
            </li>
            <li class="menu-item-has-children">
               <ul>
                  ul1
               </ul>
               <ul>
                  ul2
               </ul>
            </li>
         </ul>
      </div>
   </div>
   <div class="st-nav-mobile">
      <div class="main-menu">
         <div class="penci-mega-latest-posts">
            penci-mega-latest-posts1
         </div>
         <div class="penci-mega-latest-posts">
            penci-mega-latest-posts2
         </div>
         <div class="mega-cat-content-tab">
            mega-cat-content-tab1
         </div>
         <div class="mega-cat-content-tab">
            mega-cat-content-tab2
         </div>
         <div class="mega-recent-post">
            mega-recent-post1
         </div>
         <div class="mega-recent-post">
            mega-recent-post2
         </div>
         <div class="mega-cat-wrapper">
            mega-cat-wrapper1
         </div>
         <div class="mega-cat-wrapper">
            mega-cat-wrapper2
         </div>
         <div class="mega-cat-sub-categories">
            mega-cat-sub-categories1
         </div>
         <div class="mega-cat-sub-categories">
            mega-cat-sub-categories2
         </div>
      </div>
   </div>
</div>

Clean code:

var mobileItems = document.querySelectorAll('#slide-out .nav-mobile .main-menu li.menu-item-has-children');
[].forEach.call(mobileItems, function(el){
   var i = document.createElement('i');
   i.setAttribute('class','mobile-arrows fa fa-chevron-down');
   el.appendChild(i);
});

var li_i = document.querySelectorAll('li.menu-item-has-children i.mobile-arrows');
[].forEach.call(li_i, function(el){
   el.addEventListener('click', function(){
      if(this.className.indexOf('fa-chevron-down') != -1){
         this.classList.remove("fa-chevron-down");
         this.classList.add("fa-chevron-up");
      }else{
         this.classList.remove("fa-chevron-up");
         this.classList.add("fa-chevron-down");
      }
      
      var ul = this.parentNode.querySelectorAll('ul')[0];
      ul.style.display = ul.offsetParent === null ? 'block' : 'none';

   });
});

var mobileItems = document.querySelectorAll('#slide-out .st-nav-mobile .main-menu *');
var elpai = mobileItems[0].parentNode;
[].forEach.call(mobileItems, function(el){
   elpai.parentNode.appendChild(el);

   var tn = el.nodeName.toLowerCase();
   if(tn == "div" && el.className.indexOf('penci-mega-latest-posts') != -1) el.outerHTML = '';
   if(tn == "div" && el.className.indexOf('mega-cat-content-tab') != -1) el.outerHTML = '';
   if(tn == "div" && el.className.indexOf('mega-recent-post') != -1) el.outerHTML = '';
});

elpai.outerHTML = '';

Compatibility: IE10+, Chrome, Firefox, Opera (these latest) and even Windows Safari 5 which was abandoned long ago.

  • Simply wonderful. I made a complete example with your code in the codepen. https://codepen.io/johnquimera/pen/EorBjO Thank you.

  • @Johnquimera Thanks brother! Good luck!

  • good, I thank you.

  • Allow me to take up a little more of your time. In the jquery code I used slideToggle(300) and toggleClass('is-open') with Transform: Rotate(180deg); in the "is-open" class to create a cute effect. https://pastebin.com/b5XxZJd0 it is possible to do this also in this code?

  • I published the same menu in jquery with the effect. https://codepen.io/johnquimera/pen/qpgedN

  • @Johnquimera Check out https://jsfiddle.net/rtw0vjdw/

  • very good, very good indeed, I applied your code in my example in the codpen. Turned out great, the deal is that the sub-menu it is already born open. see: https://codepen.io/johnquimera/pen/MrxWyG

  • Change that line: ul.style.height = ul.offsetHeight+'px'; for that reason ul.style.height = '0'; and puts this line ul.setAttribute('data-h',ul.offsetHeight); before the line above.

  • Dude, that’s art. That’s perfect!! Thanks. https://codepen.io/johnquimera/pen/MrxWyG

  • I changed the example in code pen, I was testing the sub-menu inside another sub-menu. But the height of the first sub-menu does not allow you to expand the sub-menu within it. see "Sub Menu in Sub Menu" https://codepen.io/johnquimera/pen/MrxWyG

  • @Johnquimera Arrumei: https://jsfiddle.net/rtw0vjdw/2/ ... there is only one problem in the arrow of the submenus that are not closing when closing the menu-parent but I solve it here quickly..

  • @Johnquimera Solved arrow throw: https://jsfiddle.net/rtw0vjdw/3/

  • Opa, perfect, thanks, I liked the jsfiddle, I created an account, I made a Fork. I am a psychopath, I put another submenu inside the submenu sub menu. The height error persists in it. Not that it’s much, a sub menu within another submenu is already exaggerated, even so... I think I could replicate the code of your solution in this same problem, but I think it would not be ideal, since I would have to do the same until infinity no? https://jsfiddle.net/johnquimera/v54qyqtg/5/

  • Could you help me with another javascript question? https://answall.com/questions/271143/remover-class-e-alterar-valor-aria-hidden-ao-clicar-no-body

  • @Johnquimera I will look... until I had forgotten the question above. For more than one submenu, I would have to make a count. I don’t think that’s a big deal.

Show 10 more comments

Browser other questions tagged javascript jquery dom

You are not signed in. Login or sign up in order to post.