Click here to Skip to main content
15,867,330 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello, I am starting my studies in `TypeScript` and am putting together a submenu with `Bootstrap` where I will need to insert code that I found, but it is in `JQuery`. I am not able to convert it to `TypeScript`. Can someone here help me to turn this code to `TypeScript`?

    $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
      if (!$(this).next().hasClass('show')) {
        $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
      }
      var $subMenu = $(this).next(".dropdown-menu");
      $subMenu.toggleClass('show');
    
    
      $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
        $('.dropdown-submenu .show').removeClass("show");
      });
    
    
      return false;
    });


Where did I get it from: https://codepen.io/surjithctly/pen/PJqKzQ[^]

What I have tried:

function getParents(el, parentSelector) {

    // If no parentSelector defined will bubble up all the way to *document*
    if (parentSelector === undefined) {
        parentSelector = document;
    }

    var parents = [];
    var p = el.parentNode;

    while (p !== parentSelector) {
        var o = p;
        parents.push(o);
        p = o.parentNode;
    }
    parents.push(parentSelector); // Push that parentSelector you wanted to stop at

    return parents;
}



var addDropDown = document.querySelectorAll('.dropdown-menu a.dropdown-toggle');

        for (var i = 0; i < addDropDown.length; i++) {
            addDropDown[i].addEventListener('click', function (e) {

                if (!this.nextElementSibling.classList.contains('show')) {

                    var elemento = getParents(this, document.getElementsByClassName("dropdown-menu"))[0].querySelectorAll('.show');

                    for (var z = 0; z < elemento.length; z++) {
                        elemento[i].addEventListener('click', function (e) {
                            elemento[z].classList.remove("show");
                        });
                    }
                    
                }
                var $subMenu = this.nextElementSibling(".dropdown-menu");
                $subMenu.classList.toggle('show');

                this.parentNode('li.nav-item.dropdown.show').addEventListener('hidden.bs.dropdown', function (e) {
                    var itensLista = document.querySelectorAll('.dropdown-submenu .show');

                    for (var x = 0; x < itensLista.length; x++) {
                        itensLista[i].classList.remove("show");
                    }
                });


                return false;
            });
        }
Posted
Updated 21-Jun-19 7:38am
v6

1 solution

You just have to install the type definitions, so the TypeScript compiler knows what's up: How to use jQuery with TypeScript - Stack Overflow[^]
And then you can use $ as normal.

[Edit after your comment]

Oh, I see.

I'm not going to translate the whole piece of code, but what you need to do, is understand exactly what the code does and look for the equivalent functionality in plain JavaScript or TypeScript. For example, $('.dropdown-menu a.dropdown-toggle') would be document.querySelectorAll('.dropdown-menu a.dropdown-toggle')

You may also find this resource interesting, which shows you how common jQuery functions can be implemented in pure JavaScript, so then using them in TypeScript is trivial too: http://youmightnotneedjquery.com[^]
 
Share this answer
 
v2
Comments
Member 14505926 19-Jun-19 14:06pm    
Então Thomas, na verdade eu gostaria de usar somente o TS, sem colocar o JQuery no meio sabe.
Thomas Daniels 19-Jun-19 14:17pm    
I edited my answer.
Member 14505926 19-Jun-19 14:41pm    
Thanks for the response, it gave me a great help, but I'm having a problem right away in that first part, right after the "querySelectorAll ()." I'm putting "addEventListener", but this is giving error. Do you know why?
Thomas Daniels 19-Jun-19 14:48pm    
querySelectorAll returns an array, and addEventListener only works on elements, not arrays. Loop over the array and set the event listener on each element. Or, if you know there will only be one element, you can do querySelector (without 'All') to get just one element.
Member 14505926 19-Jun-19 15:18pm    
Only one thing... the JQuery ".parents()", I don't found it. I founded
a JQuery ".parent", which in typescript would look like ".parentNode", but don't works. I'll edit a question and put as I am doing now

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900