jQuery如何追加兄弟div

时间:2016-04-26 11:38:54

标签: jquery

在单个页面中,我有多个divs,如下所示:

      <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>

点击img元素后,我运行了一些逻辑并获得了一个google,然后我想将其放入同级google-map div中,但是它会插入每个div}与google-map类。

以下是jQuery:

    $('.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');

        });

问题是:如何仅使用班级google-map附加到兄弟div?

1 个答案:

答案 0 :(得分:2)

.siblings()

的当前元素的this上下文遍历中
  

获取匹配元素集中每个元素的兄弟元素,可选择通过选择器进行过滤。

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