Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I set a attribute to a specific element when using a for loop in javaScript?

Tags:

javascript

Below I have a function assigned to a variable. Essentially I got it to work (apply a attribute to a collection of elements). My problem is I'd like the elements which will be set to the attribute, to match the strings which I am passing to the function.

I know the problem is here:

document.links[i].setAttribute("target", "_blank"); //this is hitting all links in the document.

I'd like just to only change the strings matched in the call:

URLChecker.searchURL('smo', 'smodev');  

JS:

var URLChecker = (function iffe() {
  var publicAPI = {
        getURL: function() {
            for (var i = 0; i < arguments.length; i++) {
                return {
                    'smo': 'http://url.nyc.com',
                    'smodev': 'http://smodev.rye.foo.com',
                    'url1_sans_3w': 'http://url1.com',
                    'url2': 'http://www.url2.com',
                    'url3': 'http://www2.url3.com'
                }[arguments[i]];
            }
        },
        searchURL: function(url) {
            for (var i = 0, l = document.links.length; i < l; i++) {
                var links = document.links[i];
                if (links.href.indexOf(publicAPI.getURL(url) !== -1)) {
                    document.links[i].setAttribute("target", "_blank");
                }
            }
        }
    };
return publicAPI;
})();

Call the function like so:

URLChecker.searchURL('smo', 'smodev');  

HTML:

<a href="http://url.nyc.com">http://url.nyc.com</a>
<br>
<a href="http://smodev.rye.foo.com">http://smodev.rye.foo.com</a>
<br>
<a href="http://url1.com">http://url1.com</a>
<br>
<a href="http://www.url2.com">http://www.url2.com</a>
<br>
<a href="http://www.url3.com">http://www.url3.com</a>
like image 967
Antonio Pavicevac-Ortiz Avatar asked Jul 02 '26 01:07

Antonio Pavicevac-Ortiz


1 Answers

A few small logic tweaks are needed to do what you want. Like this:

var URLChecker = (function iffe() {
  var publicAPI = {
        getURL: function() {
            for (var i = 0; i < arguments.length; i++) {
                return {
                    'smo': 'http://url.nyc.com',
                    'smodev': 'http://smodev.rye.foo.com',
                    'url1_sans_3w': 'http://url1.com',
                    'url2': 'http://www.url2.com',
                    'url3': 'http://www2.url3.com'
                }[arguments[i]];
            }
        },
        searchURL: function() {
            var link, url;
            for(var i = 0, len = arguments.length; i < len; i++) {
                url = this.getURL(arguments[i]);
                for (var j = 0, jlen = document.links.length; j < jlen; j++) {
                    link = document.links[j];
                    if (link.href.indexOf(url) !== -1) {
                        link.setAttribute("target", "_blank");
                    }
                }
            }
        }
    };
return publicAPI;
})();

URLChecker.searchURL('smo', 'smodev');

There were just a few issues with how you were checking the url and you needed to loop over both the url and the arguments.

There was also an issue with the indexOf that a parenthesis ended at the wrong position.

JS Fiddle here: https://jsfiddle.net/dkksgcc7/

like image 184
earl3s Avatar answered Jul 03 '26 13:07

earl3s



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!