jquery store urls into an array and open them using .click(); function with controls

Question

My Exlanation of what I am trying to do, (tried explaining it in 2 ways to help you get an idea)

example 1

1. store all elements like so: <a href="etc">url1</a> from inside <div class=".resources"></div> in an array, so that they could be clicked with click(); function
2. open first url from array with default button - i.e. $(array[0]).click();
3. open next url from array with next button - i.e. last clicked $(array[+1]).click();
4. open previous url from array with prev button - i.e. last clicked $(array[-1]).click();

example 2

1. create an empty class in HTML like so: <div class="resources"></div>
2. create an array of URLs in JAVASCRIPT/JQUERY and store them within .resources class
3. create prev , default , next buttons in HTML
4. default button when clicked opens first URL from array i.e.: $(array[0]).click();
5. next button when clicked opens next URL from array i.e.: $(array[+1]).click();
6. prev button when clicked opens previous URL from array i.e.: $(array[-1]).click();

MUSTS: urls must be opened with: click(); function: like so: $(array[0]).click();

fiddle to make it clearer: view fiddle

Answer 1

I modified your fiddle a bit and it seems to do what you want; if I understood it correctly:

modified fiddle

var links = $( '.resources a[href*="url"]' );

var currentLink = 0;

/* click and open default link ! */ 
$('.open-current-link').on('click', function(){ 
    $( links[currentLink] ).click();        
});

/* click and open next link */ 
$('.open-next').on('click', function(){  
    currentLink = currentLink + 1;
    if (currentLink == 4){
        currentLink = 0;
    }
    alert('clicking ' + $(links[currentLink]).attr('href'));
    $( links[currentLink] ).click();        
});

/* click and open previous link */
$('.open-prev').on('click', function(){
    currentLink = currentLink - 1;

    if (currentLink == -1){
        currentLink = 3;
    }

    alert('clicking ' + $(links[currentLink]).attr('href'));
    $( links[currentLink] ).click();      
});

Answer 2

To show show you how simple it is to impliment RingArray for use with your code example.

CSS

body {
    color: #fff;
}
.link {
    width: 180px;
    height: 20px;
    padding: 10px;
    background-color: black;
    cursor: pointer;
    text-align: center;
}

HTML

<div class="resources">
    <a href="url1"></a>  
    <a href="url2"></a>  
    <a href="url3"></a>  
    <a href="url4"></a>    
</div>

/* index -= 1 */
<div class="link open-prev">click previous link</div> 
/* indexed [0] */
<div class="link open-current-link">click default link</div> 
/* index += 1 */
<div class="link open-next">click next link</div> 

Javascript

function RingArray(object, position) {
    this.array = RingArray.compact(object);
    this.setPosition(position);
}

RingArray.toInt32 = function (number) {
    return number >> 0;
};

RingArray.toUint32 = function (number) {
    return number >>> 0;
};

RingArray.isOdd = function (number) {
    return number % 2 === 1;
};

RingArray.indexWrap = function (index, length) {
    index = RingArray.toInt32(index);
    length = RingArray.toUint32(length);
    if (index < 0 && RingArray.isOdd(length)) {
        index -= 1;
    }

    return RingArray.toUint32(index) % length;
};

RingArray.compact = (function (filter) {
    var compact;

    if (typeof filter === 'function') {
        compact = function (object) {
            return filter.call(object, function (element) {
                return element;
            });
        };
    } else {
        compact = function (object) {
            object = Object(object);
            var array = [],
                length = RingArray.toUint32(object.length),
                index;

            for (index = 0; index < length; index += 1) {
                if (index in object) {
                    array.push(object[index]);
                }
            }

            return array;
        };
    }

    return compact;
}(Array.prototype.filter));

RingArray.prototype = {
    setPosition: function (position) {
        this.position = RingArray.indexWrap(position, this.array.length);

        return this;
    },

    setToStart: function () {
        return this.setPosition(0);
    },

    setToEnd: function () {
        return this.setPosition(this.array.length - 1);
    },

    setRandom: function () {
        return this.setPosition(Math.floor(Math.random() * this.array.length));
    },

    increment: function (amount) {
        return this.setPosition(this.position + (RingArray.toInt32(amount) || 1));
    },

    previousElement: function () {
        return this.array[RingArray.indexWrap(this.position - 1, this.array.length)];
    },

    currentElement: function () {
        return this.array[this.position];
    },

    nextElement: function () {
        return this.array[RingArray.indexWrap(this.position + 1, this.array.length)];
    }
};

/* get urls and store in an array */
var links = $('.resources a[href*="url"]'),
    linkRing = new RingArray(links);

/* click and open default link ! */
$('.open-current-link').on('click', function () {
    console.log(linkRing.setToStart());
});

/* click and open next link */
$('.open-next').on('click', function () {
    console.log(linkRing.increment(1));
});

/* click and open previous link */
$('.open-prev').on('click', function () {
    console.log(linkRing.increment(-1));
});

On jsFiddle