CODEWITHSUNDEEP
jquery
WpDoe
WpDoe

Reputation: 474

jQuery how to append to a sibling div

In a single page I have multiple divs like following:

      <div class="map-area">
         <img class="icon map_icon" src="..." />
           <input type="hidden" class="start_latitude" value="..." />
           <input type="hidden" class="start_longitude" value="..." />
           <input type="hidden" class="end_latitude" value="..." />
           <input type="hidden" class="end_longitude" value="..." /
         <div class="google-map"></div>
      </div>

On a click on the img element I run some logic and get a google which I would then like to place into the sibling google-map div, however it gets inserted into every div with google-map class.

Here is the jQuery for doing that:

    $('.map_icon').click(function(){

            var start_latitude  =   $(this).siblings( '.start_latitude' ).val();
            var start_longitude =   $(this).siblings( '.start_longitude' ).val();
            var end_latitude    =   $(this).siblings( '.end_latitude' ).val();
            var end_longitude   =   $(this).siblings( '.end_longitude' ).val(); 

            url = GMaps.staticMapURL({
              size: [610, 300],
              lat: start_latitude,
              lng: start_longitude,
              markers: [
                {lat: start_latitude, lng: start_longitude, color: 'blue'},
                {lat: end_latitude, lng: end_longitude, color: 'red'}
              ]
            });

            $('<img/>').attr( 'src', url ).appendTo('.google-map');

        });

Question is: how do I append to only the sibling div with class google-map ?

Upvotes: 1

Views: 854

Answers (1)

Satpal
Satpal

Reputation: 133403

In current element's this context traverse for .siblings()

Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

$('<img/>').attr( 'src', url ).appendTo($(this).siblings('.google-map'));

Upvotes: 2

Related Questions