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, Mar 17 '13 at 16:28
http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/ is very useful — ericosg, Mar 17 '13 at 16:29
For the part that selects by attribute (`[href="http://asksomeone.co.za/category/products"]): http://stackoverflow.com/questions/9496427/how-to-get-elements-by-attribute-selector-w-native-javascript-w-o-queryselector — Aaron Blenkush, Mar 17 '13 at 16:29
About the jQuery issue on wordpress, It could be because of conflicts with another lib: http://api.jquery.com/jQuery.noConflict/ or maybe because it uses a different version. Check this, it might solve the problem. — Maresh, Mar 17 '13 at 16:29
thank you guys, All your answers are very insightful and useful — DextrousDave, Mar 17 '13 at 16:59
@ericosg: Thank you, very cool article- I was wondering if there is something like that — DextrousDave, Mar 17 '13 at 17:01

score 2 · Answer 1 · answered Mar 17 '13 at 16:34

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 '13 at 16:34

Liam Newmarch

3,935
3
32
46

You're welcome, glad you found the real source of the problem. – Liam Newmarch Mar 17 '13 at 16:59
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... – DextrousDave Mar 17 '13 at 17:02

score 2 · Accepted Answer · answered Mar 17 '13 at 16:38

$ 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()

score 2 · Answer 3 · answered Mar 17 '13 at 16:42

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");
    }
}

score 1 · Answer 4 · answered Mar 17 '13 at 16:31

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 '13 at 16:31

Dave

44,275
12
65
105

rab · Answer 5 · 2013-03-17T17:26:16.507

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 );

Replacing jQuery code with Javascript equivalent

5 Answers5