Jquery Document.ready loop

Question

I am trying to make a loop in my document.ready event so that I can have dry code. However the click event returns undefined when I create it via the loop but works fine when I declare each document.ready event singularly.

<script>
var $a = jQuery.noConflict();
$a(document).ready(function () {
    $a(".nav-1-1").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-1").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-2").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-2").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-3").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-3").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-4").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-4").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-5").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-5").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-6").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-6").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-7").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-7").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-8").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-8").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-9").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-9").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-10").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-10").find("a").attr("href");
    });
});
</script>

Here is the loop I am trying to make to simplify the above code:

<script>
var $a = jQuery.noConflict();

$a(document).ready(function () {
    for (var i=1; i<11; i++) {
        $a(".nav-1-1"+i).css('cursor','pointer').click(function(event) {
            window.location.href = $a(".nav-1-1").find("a").attr("href");
        });
    }
});
</script>

I have corrected the above loop as Trevor pointed out I had forgotten to include the i variable.

It seems like you are making this way too complex. What does your html look like? — Josh Mein, Nov 05 '13 at 23:19
`$a(".nav-1-1")` You are not making use of `i` in your dry code example `$a(".nav-1-"+i)` — Trevor, Nov 05 '13 at 23:21

score 5 · Accepted Answer · edited May 23 '17 at 11:50

Simplifying your logic a bit:

jQuery(function($) {
    $("[class*='nav-1-']").css('cursor', 'pointer').click(function() {
        location = $(this).find("a").prop("href");
    });
});

Demo

Though, you should consider adding a common class to all nav-1-XX elements to select them in an simpler and more efficient manner. If you do that, you can also apply the cursor:pointer on that class.

Explanation

jQuery(fn) is a shorthand for jQuery(document).ready(fn). This is just a matter of preference. Either of these receive forms' callback receives jQuery as the first argument, hence I'm aliasing it back to $ inside the DOM ready callback. This can be used in noConflict mode the same way.

The Attribute Contains Selector [name*="value"] will select all elements that contain a nav-1- in their class attribute. If you follow my advice and add a common class to all elements, you won't need it.

Inside of a function being called as event handler, the this reference will point to the element which has received the event that it is listening to. That is, this will reference the given nav-1-XX which has been clicked.

Finally, the window (global scope) doesn't need to be referenced explicitly. Lexical scope will find it either way:

window.location === location

(That is, unless you've shadowed the global location object)

Hence, using either window.location and location is mostly a matter of preference.

Assigning to either location or location.href is a matter of preference as well, since both are widely supported.

This looks better than what I have however I must alias jQuery to var $a because of conflicts with another javascript framework that is in use. Could you provide an example of this with the var $a? — William Knauss, Nov 06 '13 at 02:34
@user2958381 see this answer's [first revision](http://stackoverflow.com/revisions/19801064/1). Though, as long as you do not need to reference the other library inside this DOM ready handler you should have no problems with the code I've posted in the answer - the `$` alias is local to the function I'm passing in `jQuery(fn)`. You can as well just replace all occurrences of `$` (including the parameter name) to alias it to your liking (e.g. `$a`). — Fabrício Matté, Nov 06 '13 at 04:46
I tried your above code, but it didn't work. Your revision did. Thank you so very much! — William Knauss, Nov 06 '13 at 14:01

score 1 · Answer 2 · answered Nov 05 '13 at 23:25

What if you mix php and Js ?! Use php to generate the long code above .. and in your index.php it will still look the same small code :

example:

$a(document).ready(function () {

<?php
$i=0;
 while ( $i < 11)
{
$i++;
?>

    $a(".nav-1-<?php echo $i;?>").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-<?php echo $i;?>").find("a").attr("href");
    });

<?php
 }
?>

});

Jquery Document.ready loop

2 Answers2

Explanation