javascript - jquery:循环相似的div

Question

我不太擅长 jQuery/Javascript，但我确信以下是可能的，但不知道我应该如何开始这样做。

我正在使用 Google map API。在 WordPress 中，我有很多帖子，我在内容中提到了地址。

现在，我用一个简单的循环输出地址，但我想做的是使用 jQuery 读取这些地址，将它们放入数组中并在 map 上显示它们。

目前它只显示它遇到的第一个地址，但我实际上需要使用<div class="address"></div>循环遍历每个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
                });

            });
        }

    });

感谢您的帮助!

Answer 1

将您的 var 地址 = [$.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)