Replacing jQuery code with Javascript equivalent

Question

I know a little bit jQuery, and even though it is still javascript, I do not know how to convert the following code to pure Javascript:

$('#breadcrumbs .category[href="http://asksomeone.co.za/category/products"]')
    .attr('href','http://myurl.com/803-2');

How would I do that?

The reason why I am doing this is because I am using a Wordpress theme...whenever I include the jQuery library, it breaks many things on my site, when I don't include the jquery library, no jquery code runs...

There are two parts to the problem. Selecting the element, and setting the attribute. — Brad
– Brad, Commented Mar 17, 2013 at 16:28
net.tutsplus.com/tutorials/javascript-ajax/… is very useful — ericosg
– ericosg, Commented Mar 17, 2013 at 16:29
For the part that selects by attribute (`[href="asksomeone.co.za/category/products"]): stackoverflow.com/questions/9496427/… — Aaron Blenkush
– Aaron Blenkush, Commented Mar 17, 2013 at 16:29
About the jQuery issue on wordpress, It could be because of conflicts with another lib: api.jquery.com/jQuery.noConflict or maybe because it uses a different version. Check this, it might solve the problem. — Maresh
– Maresh, Commented Mar 17, 2013 at 16:29
thank you guys, All your answers are very insightful and useful — DextrousDave
– DextrousDave, Commented Mar 17, 2013 at 16:59

magritte · Accepted Answer · 2013-03-17 16:38:01Z

2

$ is just an alias for jQuery. You could just use:

jQuery('#breadcrumbs .category[href="http://asksomeone.co.za/category/products"]').attr('href','http://myurl.com/803-2');

or else wrap the code in a self executing function passing in jQuery like:

(function($){
     $('#breadcrumbs .category[href="http://asksomeone.co.za/category/products"]').attr('href','http://myurl.com/803-2');
})(jQuery);

If you really want to go down the pure js route, then take a look at:

document.getElementById()

and

element.setAttribute()

answered Mar 17, 2013 at 16:38

magritte

7,71610 gold badges65 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Liam · Accepted Answer · 2013-03-17 16:34:27Z

2

If you're willing to drop support for Internet Explorer 7, you could do

var i, elems = document.querySelectorAll('#breadcrumbs .category[href="http://asksomeone.co.za/category/products"]');

for (i = 0; i < elems.length; i++) {
   elems[i].href = 'http://myurl.com/803-2';
}

Otherwise, I'm afraid you are better off using a library.

answered Mar 17, 2013 at 16:34

Liam

4,1253 gold badges34 silver badges47 bronze badges

2 Comments

Liam Over a year ago

You're welcome, glad you found the real source of the problem.

DextrousDave Over a year ago

Yes...it was as simple as wrapping my code inside: jQuery(function ($) {});...But knowing how to do it in pure js is good to know anyways...

Aaron Blenkush · Accepted Answer · 2013-03-17 16:42:27Z

2

As others have mentioned, you might want to just try to resolve the library conflicts.

To answer your question, here is a possibility:

var elements = document
    .getElementById('breadcrumbs')
    .getElementsByClassName('category'); //Not supported below IE9 :-(

for (var i = 0; i < elements.length; i++) {
    if (elements[i].href == "http://asksomeone.co.za/category/products") {
        elements[i].setAttribute('href', "http://myurl.com/803-2");
    }
}

answered Mar 17, 2013 at 16:42

Aaron Blenkush

3,0592 gold badges30 silver badges55 bronze badges

Comments

Dave · Accepted Answer · 2013-03-17 16:31:09Z

1

jQuery's selectors are based on sizzle: http://sizzlejs.com/ Maybe you can include that library? If not, the first part of your problem is quite difficult.

The second part is easy:

myElement.setAttribute('href','http://myurl.com/803-2');

answered Mar 17, 2013 at 16:31

Dave

46.8k12 gold badges70 silver badges109 bronze badges

Comments

rab · Accepted Answer · 2013-03-17 17:26:16Z

If you don't like to include jQuery library for url change. We need following functions

function getByClassName( className , selector ) {
    selector = selector || document;

    if( selector.getElementsByClassName ) {
        return selector.getElementsByClassName( className );
    }

    var els = [];

    var childs = selector.getElementsByTagName( '*' );

    for( var i = 0, j = childs.length; i < j; i++ ) {
        if( childs[i].className.indexOf( className ) > -1 ) {
            els.push( childs[i] );
        }
    }
    return els;
};

function changeUrl( els ,  url , newUrl  ){

    for( var i = 0; i < els.length ; i++ ){

        if ( els[i].href == url ) {
                els[i].href = newUrl ;
        }
    }

}

and call the function

changeUrl ( 
  getByClassName( 'category' , document.getElementById('breadcrumbs')  ) , 
  "http://asksomeone.co.za/category/products" , 
  "http://myurl.com/803-2"
);

or If you are using jQuery library .. use this

(function( JQ ){

    JQ('#breadcrumbs .category[href="'
        + 'http://asksomeone.co.za/category/products"]')
       .attr('href',"http://myurl.com/803-2");

})( jQuery );

Collectives™ on Stack Overflow

Replacing jQuery code with Javascript equivalent

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related