jquery：通過類似div進行循環

我對jQuery/Javascript並不擅長，但我確信以下是可能的，但不知道該如何開始做。jquery：通過類似div進行循環

我正在使用Google Maps API。在WordPress我有嚴重的帖子，我已經提到了它的內容中的地址。

現在，我用一個簡單的循環輸出地址，但我想要做的是用jQuery讀取這些地址，將它們放入數組中並將它們顯示在地圖上。

目前，它只是顯示它遇到的第一個地址，但我實際上是通過每格需要循環使用<div class="address"></div>：

這裏是我的PHP/HTML是什麼樣子：

 <?php 

      $kantorenArgs = array(

       'post_type' => 'kantoren', 
       'posts_per_page' => '4' 

      ); 

      $kantoren = new WP_Query($kantorenArgs); 

      if ($kantoren->have_posts()) : 

       while ($kantoren->have_posts()) : $kantoren->the_post(); ?> 

       <li class="office"> 

        <a href="<?php the_permalink(); ?>"> 

         <?php the_title(); ?> 

         <div class="address"><?php the_content(); ?></div> 

        </a> 

       </li> 

       <?php 

       endwhile; 

      endif; 

     ?>

這是我正在使用的jQuery：

jQuery(document).ready(function() { 

     (function($) { 

      $.get_addresses = function() { 

      var address = $(".address").html(); 

      return address; 

      } 
     })(jQuery); 

     var map; 
     var elevator; 
     var myOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(50.9660922, 4.5574837), 
      mapTypeId: 'roadmap' 
     }; 
     map = new google.maps.Map($('#map_canvas')[0], myOptions); 

     var addresses = [$.get_addresses()]; 

     for (var x = 0; x < addresses.length; x++) { 
      $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) { 
       var p = data.results[0].geometry.location 
       var latlng = new google.maps.LatLng(p.lat, p.lng); 
       new google.maps.Marker({ 
        position: latlng, 
        map: map 
       }); 

      }); 
     } 

    });

感謝您的幫助！

來源

2015-03-19 Jeroen Bellemans

看看沒有比'var address = $（「。address」）。html（）'這行更進一步，它返回jQuery集合sel中* first *元素的HTML受到$（「。address」）的影響。 – 2015-03-19 12:54:09

替換您var addresses = [$.get_addresses()];由：

 $('.address').each(function() { 
      $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+$(this).html()+'&sensor=false', null, function (data) { 
      var p = data.results[0].geometry.location 
      var latlng = new google.maps.LatLng(p.lat, p.lng); 
      new google.maps.Marker({ 
       position: latlng, 
       map: map 
      }); 

     }); 
    });

您也可以刪除的功能，我們不再使用(function($) {...})(jQuery)

來源

2015-03-19 12:49:03 bviale

並刪除'（函數（$）{...}）（jQuery）' – 2015-03-19 12:59:48

當然，因爲它不再使用 – bviale 2015-03-19 13:00:23

，而不是創建一個函數去得到所有的地址使用.each()

$('.address').each(function(){ 
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+$(this).html()+'&sensor=false', null, function (data) { 
      var p = data.results[0].geometry.location 
      var latlng = new google.maps.LatLng(p.lat, p.lng); 
      new google.maps.Marker({ 
       position: latlng, 
       map: map 
      }); 
     }); 
});

來源

2015-03-19 12:58:02

jquery：通過類似div進行循環

回答

相關問題