CODEWITHSUNDEEP
javascriptjquery
DextrousDave
DextrousDave

Reputation: 6793

Replacing jQuery code with Javascript equivalent

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...

Upvotes: 2

Views: 4542

Answers (5)

rab
rab

Reputation: 4144

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

Upvotes: 0

Aaron Blenkush
Aaron Blenkush

Reputation: 3059

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

Upvotes: 2

magritte
magritte

Reputation: 7636

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

Upvotes: 2

Liam
Liam

Reputation: 4055

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.

Upvotes: 2

Dave
Dave

Reputation: 46249

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

Upvotes: 1

Related Questions