Question

How can I replace this for-each loop with jQuery?

$(document).ready(function(){
    hidebutton = $("#hideall");
    hidebutton.click(function(){
        for(i=1;i<=6;i++){
                var countrylist = document.getElementById("Country-"+i);
                countrylist.style.display = "none";
            }
    });
});

The HTML is

<input id="hideall" type="button" value='Hide Countries' /><br /><br />
<div id="Country-1">USA</div>
<div id="Country-2">UK</div>
<div id="Country-3">UAE</div>
<div id="Country-4">China</div>
<div id="Country-5">India</div>
<div id="Country-6">Japan</div>

Answer 1

Edited your jsfiddle, added an example of jQuery foreach in a comment. However, you don’t need foreach here because jQuery can operate on a collection. I changed your HTML as well, you need to group those divs better:

<div id="Countries">
    <div id="Country-1">USA</div>
    <div id="Country-2">UK</div>
    <div id="Country-3">UAE</div>
    <div id="Country-4">China</div>
    <div id="Country-5">India</div>
    <div id="Country-6">Japan</div>
</div>

$(document).ready(function(){
    hidebutton = $("#hideall");
    hidebutton.click(function(){
        $('#Countries div').hide();
        // $('#Countries div').each(function(index, divElement) { ... });
    });
});

http://jsfiddle.net/nLfNj/3/