Converting Jquery to javascript to avoid jquery library conflict

Question

I have a jquery script that works the way I intend it to by appending a set of links within a div's class but unfortunately when I load the jquery library it kills my slider on my Wordpress site's page.

I am trying to rewrite the jquery to javascript so I don't have to rely on the library but am stumped on the syntax.

Here is the jquery that works:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        var trail = '#announcements';
        $(".pagination").find('a').attr('href', $(".pagination").find('a').attr('href') + trail);
    });
    </script>

And here is what I tried to write in javascript:

    <script>
    document.addEventListener("DOMContentLoaded", function(){
    var trail = '#announcements';
    var div = document.getElementsByClassName("pagination").find('a').attr('href', 
    this.find('a').attr('href') + trail);
    });
    </script>

However, this very much looks like an [XY Problem](http://xyproblem.info/) - do you already have another version of jquery on your page that 3.5.1 conflicts with? Try your original code *without* the ` — freedomn-m, Oct 19 '20 at 17:50
I mean, i certainly welcome you to move away from jquery, but, this is very much an X/Y problem. If you instead focused on why it's conflicting, that's probably a very easy problem to solve too. — Kevin B, Oct 19 '20 at 17:51
I would like to use jquery but every time I add a min library link it kills my slider. This is on a wordpress site and I am using the AVADA theme and the Code Block element to put my jquery on the page. @KevinB — Holodout, Oct 19 '20 at 18:13
@freedomn-m I was getting an error that said $ is not a function and I learned that in wordpress you have to wrap the code in: jQuery(document).ready(function($){ Insert code here }); I was able to do that and get it to work. — Holodout, Oct 19 '20 at 18:21

Holodout · Accepted Answer · 2020-10-20T14:13:55.590

Since this was more of an XY problem as pointed out I decided to look into why my jQuery wasn't working and discovered an error that was saying, $ is not a function similar to this post.

So with that in mind, I updated my jquery code and now it works without conflict.

Updated code:

    <script>
    jQuery(document).ready(function($){
    $(document).ready(function() {
        var trail = '#announcements';
        $(".pagination").find('a').attr('href', 
    $(".pagination").find('a').attr('href') + trail);
    });
    });
    </script>

Deykun · Answer 2 · 2020-11-29T14:11:34.367

I believe that a correct translation would look like this:

var trail = '#announcements';
var linksInPagination = Array.from(document.querySelectorAll('.pagination a'));

linksInPagination.forEach((link) => {
  link.setAttribute('href', link.getAttribute('href') + trail ); 
});

Where are your mistakes?

var div = document.getElementsByClassName("pagination").find('a').attr('href', 
    this.find('a').attr('href') + trail);

document.getElementsByClassName("pagination") does not have .find() method.
Semanticaly it's defiently not a <div> but a Node Colection of <a> (so don't call it div :))
In jQuery you can use $('p').text('new text') for more than one <p> but in JS you have to loop and call it on elements directly. I'm converting a node collection to array and doing it with forEach method.

Converting Jquery to javascript to avoid jquery library conflict

2 Answers2