Get specfic child, when click on map custom control

Question

I have a div and its THREE span children, By using JQuery when I click on div then using following function I am able identify that which child was target or clicked

$('.unitContainer').on('click','span',function(){
     $('.unitContainer').children('span').each(function () {
        $(this).css('color','white');
    });
    console.log($(this).text()); // "this" is the current element in the loop
    $(this).css('color','black'); // This line change attribute of targeted div
});

Now I want this event if that div will the custom control on Map.

I tried this:

google.maps.event.addDomListener(unitControlDiv, 'click', function() {          
    $('.unitContainer').children('span').each(function () {
        $(this).css('color','white');
    });
    $(unitControlDiv).css('color','black');
});

And this:

 google.maps.event.addDomListener(unitControlDiv, 'click', function() {         
    $('.unitContainer').children('span').each(function () {
        $(this).css('color','white');
    });
    $(this).css('color','black');
});

But both not working. What I do now to make it working?

Update 1

1 : Default Control 2 : My Control (Custom Control) (Div with 3 spans)

Update 2

This demo get targeted span using JQuery

and

This demo (div on a map) didn't get work.

Answer 1

One possible solution with mouse event target:

google.maps.event.addDomListener(unitControlDiv, 'click', function(evt) {

    $('.unitContainer').children('span').each(function () {
        $(this).css('color', 'white');
    });

    //$(this).css('color', 'black');
    evt.target.setAttribute('style', 'color: black');
});

Example at jsfiddle.

Update: Change of attribute could be localized using, for example:

var innerText = evt.target.innerText;
if (innerText == 'mi' || innerText == 'km' || innerText == 'ft') {
    evt.target.setAttribute('style', 'color: black');
}

Updated example.

Answer 2

Here how it may work.

var milesSpan = $('<span class="custom-button" id="mi">mi</span>');
var kmSpan = $('<span class="custom-button" id="km">km</span>');
var feetSpan = $('<span class="custom-button" id="feet">ft</span>');

var hi = function() {
    alert($(this).attr('id') + " clicked!");
};
milesSpan.click(hi);
kmSpan.click(hi);
feetSpan.click(hi);

Just replace 'hi' with your code, 'this' refers to span object;