Convert a jquery string to pure Javascript

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();
    
asked by anonymous 21.01.2018 / 17:27

1 answer

1

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

// 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 newer), and even Windows 5 Safari that was abandoned a long time ago.

    
21.01.2018 / 20:28