Jquery css color is changing for every selector, but font-size is not?

Question

I am working with google maps and I have an array of markers which looks like this:

var locations = [
        [{
            id: 1,
            lat: 51.5239935252832,
            lng: 5.137663903579778,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 2,
            lat: 51.523853342911906,
            lng: 5.1377765563584035,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 3,
            lat: 51.5237298485607,
            lng: 5.137969675407476,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 4,
            lat: 51.52355628836575,
            lng: 5.138066234932012,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 5,
            lat: 51.52340275379578,
            lng: 5.138211074218816,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 6,
            lat: 51.523199152806626,
            lng: 5.138382735595769,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 7,
            lat: 51.5229955509073,
            lng: 5.138511481628484,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 8,
            lat: 51.52280529912936,
            lng: 5.138543668136663,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 9,
            lat: 51.523596340777075,
            lng: 5.138463201866216,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 700,
            lat: 51.523372714362736,
            lng: 5.1386992362595265,
            content: 'Kids Jungalow (5p)'
        }],
        [{
            id: 101,
            lat: 51.52329594683302,
            lng: 5.138838711128301,
            content: 'Kids Jungalow Giraffe'
        }]

Than I loop trough the array of markers and set an html marker to every position like this:

for (i = 0; i < locations.length; i++) {
    var myLatLng = new google.maps.LatLng({
        lat: locations[i][0].lat,
        lng: locations[i][0].lng
    });
    var number = locations[i][0].id;
    var marker_html = '<div id="' + number + '"><div class="rich-marker"><span class="number-id">' + number + '</span></div></div>';

    var marker = new RichMarker({
        position: myLatLng,
        map: map,
        flat: true,
        anchor: RichMarkerPosition.MIDDLE,
        content: marker_html
    });
}

Than I want to change the css styling of the class number-id on zoom level 18 like this:

map.addListener('zoom_changed', function () {
        // Limit the zoom level
        if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);

        // for loop door locaties
        for (i = 0; i < locations.length; i++) {
            setMarkerSize(i);
        }
    });

    function setMarkerSize(i) {
        var infobox = locations[i][0].infobox;
        var id = locations[i][0].id;

      if (map.getZoom() === 18) {
            $('.rich-marker').css({ 'display' : 'block', 'width' : '20px', 'height' : '20px' });
            $('.number-id').css({ 'display' : 'block', 'font-size' : '12px'});

            if (id >= 100) {
                console.log(id);
                console.log($('[data-id="' + id + '"]'));

                $('#' + id).find('.number-id').css('font-size', '10px');
                $('#' + id).find('.number-id').css('color', 'red');
            }

            infobox.setOptions({ pixelOffset: new google.maps.Size(-93, -22) });
        }

    }

The color is changing all above 100, but the font-size is only changing for the last object in the array why is that??

Answer 1

Each time you process a marker in your loop you are setting all font-size properties to 12px:

$('.number-id').css({
    'display': 'block',
    'font-size': '12px'
  });

Then you set the font-size of the current marker to "10px". That leaves only that last one you set at "10px".

proof of concept fiddle

code snippet:

 var geocoder; var map; function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP }); var bounds = new google.maps.LatLngBounds(); for (i = 0; i < locations.length; i++) { var myLatLng = new google.maps.LatLng({ lat: locations[i][0].lat, lng: locations[i][0].lng }); bounds.extend(myLatLng); var number = locations[i][0].id; var marker_html = '<div id="' + number + '"><div class="rich-marker"><span class="number-id">' + number + '</span></div></div>'; var marker = new RichMarker({ position: myLatLng, map: map, flat: true, anchor: RichMarkerPosition.MIDDLE, content: marker_html }); } map.setCenter(bounds.getCenter()); var minZoomLevel = 18; map.addListener('zoom_changed', function() { document.getElementById('zoom').innerHTML = map.getZoom(); // Limit the zoom level if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel); // for loop door locaties for (i = 0; i < locations.length; i++) { setMarkerSize(i); } }); function setMarkerSize(i) { var infobox = locations[i][0].infobox; var id = locations[i][0].id; if (map.getZoom() === 18) { $('.rich-marker').css({ 'display': 'block', 'width': '20px', 'height': '20px' }); /* $('.number-id').css({ 'display': 'block', 'font-size': '12px' }); */ if (id >= 100) { console.log(id); console.log($('[data-id="' + id + '"]')); $('#' + id).find('.number-id').css('font-size', '18px'); $('#' + id).find('.number-id').css('color', 'red'); } /* infobox.setOptions({ pixelOffset: new google.maps.Size(-93, -22) }); */ } } } google.maps.event.addDomListener(window, "load", initialize); var locations = [ [{ id: 1, lat: 51.5239935252832, lng: 5.137663903579778, content: 'Kids Jungalow (5p)' }], [{ id: 2, lat: 51.523853342911906, lng: 5.1377765563584035, content: 'Kids Jungalow (5p)' }], [{ id: 3, lat: 51.5237298485607, lng: 5.137969675407476, content: 'Kids Jungalow (5p)' }], [{ id: 4, lat: 51.52355628836575, lng: 5.138066234932012, content: 'Kids Jungalow (5p)' }], [{ id: 5, lat: 51.52340275379578, lng: 5.138211074218816, content: 'Kids Jungalow (5p)' }], [{ id: 6, lat: 51.523199152806626, lng: 5.138382735595769, content: 'Kids Jungalow (5p)' }], [{ id: 7, lat: 51.5229955509073, lng: 5.138511481628484, content: 'Kids Jungalow (5p)' }], [{ id: 8, lat: 51.52280529912936, lng: 5.138543668136663, content: 'Kids Jungalow (5p)' }], [{ id: 9, lat: 51.523596340777075, lng: 5.138463201866216, content: 'Kids Jungalow (5p)' }], [{ id: 700, lat: 51.523372714362736, lng: 5.1386992362595265, content: 'Kids Jungalow (5p)' }], [{ id: 101, lat: 51.52329594683302, lng: 5.138838711128301, content: 'Kids Jungalow Giraffe' }] ]; 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script> <script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker.js"></script> <div id="zoom"></div> <div id="map_canvas"></div>