How to use jquery content with Vanilla js

Question

I am trying to make it so that this code I wrote doesn't rely on having to access the dom in order to use its contents. I had already accessed the dom once before using jquery, and I want to be able to use the jquery I wrote instead of writing new code to access it. Here is my code so far:

  constructor($navigation, $content) {

    if ($navigation.length == 0 || $content.length == 0) {
      return;
    }

    var nav1 = document.getElementById("main-nav");
    var btns = nav1.getElementsByClassName("nav");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function () {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      });
    }
    $navigation.on('click', 'li', function () {
      $content.hide();
      $($content[$(this).index()]).show();
    });
  }

And here is where I had accessed the dom in another document:

   new Faq($("#main-nav"), $("div[class='faq-container']"));

what I want to do is make is so that var nav1 and var btns can make use of $navigation and $content, instead of accessing the dom directly. Do I have to somehow convert this code to jquery? how would I approach that?

If you're already using jQuery, why do you want to switch part of your code to vanilla DOM manipulation? It'd make much more sense to choose *one* style, then stick with it everywhere — CertainPerformance, Feb 05 '21 at 16:02
I don't think you quite understand DOM access. jQuery ***is*** directly accessing the DOM just as vanilla JS would. jQuery is just JavaScript that someone else wrote - - it's not magic. — Scott Marcus, Feb 05 '21 at 16:03
I understand that jquery access the dom; what I want is to re use what I wrote in jquery instead of having to access the dom again in the other variables I had listed. — Joao, Feb 05 '21 at 16:05
@CertainPerformance I would love to convert it to jquery; I am rather inexperienced with Jquery so I am unsure as to how to re-write it so the whole thing is jquery — Joao, Feb 05 '21 at 16:09
To convert `$("#main-nav")` to `doc.getEById("main-nav")` (I can't even bring myself to write that out it's so tedious.. but that's off topic) - you add `[0]` in your case `var nav1 = $navigation[0]` or use [`.get(0)`](https://api.jquery.com/get/) — freedomn-m, Feb 05 '21 at 16:45
Does this answer your question? [How to get a DOM Element from a JQuery Selector](https://stackoverflow.com/questions/1677880/how-to-get-a-dom-element-from-a-jquery-selector) — Stephen P, Feb 05 '21 at 18:04

freedomn-m · Accepted Answer · 2021-02-05T17:16:04.517

Reading the question as:

I have already accessed the DOM once using jquery, and I want to be able to use this variable with vanilla javascript rather than access the DOM a second time

To get the DOM node from a jquery object, you add [0] or .get(0)

function example(jqueryObj)
{
    jqueryObj[0].innerText = "set via [0]";
}

example($("#div"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"></div>

Specific to the question, to convert between $("#main-nav") and the doc.getElementById("main-nav") equivalent, you would use

var nav1 = $navigation[0]

As a bonus, here's your function jquery-ified

constructor(navigation, content) {

  if (navigation.length == 0 || content.length == 0) {
    return;
  }
  
  navigation.on("click", ".nav", function() {
      $("nav.active").removeClass("active");
      $(this).addClass("active");
  });

  navigation.on('click', 'li', function() {
    content.hide();
    $(content[$(this).index()]).show();
  });
}

new Faq($("#main-nav"), $("div.faq-container"));

How to use jquery content with Vanilla js

1 Answers1