Question

我需要将Google自动填充整个div移动到另一个div。

我的div结构：

<html>
<head></head>
<body>
<div class="container">
   <div class="row">
      some contents 
   <div> 
  <div class="pac-container">
    auto complete content 
  </div>
</div>
</body>
</html>

现在我需要在行类之前移动.pac-container类，因为我的设计问题。如何解决这个问题。

Answer 1

我就是这样做的：

$(document).ready(function(){
    $(".pac-container").detach().insertBefore($(".row"));
});

Here is the JSFiddle demo

基本上它将元素与DOM结构分离，然后将其插入与row类

匹配的元素之前

Answer 2

$('.row').insertAfter('.pac-container');

Answer 3

您希望使用clone（）方法获取元素的深层副本：

$(function(){ 
var $button = $('.button').clone();
  $('.package').html($button);
});

Answer 4

由于pac-container是动态插入的，你必须要监听它是否被插入。由于您使用的是jQuery，因此这是一个解决方案：

$(document).bind('DOMNodeInserted', function(e) {

  // Ignore dynamically-inserted scripts and other elements
  // since .pac-container is a div
  if (e.target.nodeName === 'DIV') {

    // Prioritizes the contained functions
    setTimeout(function() {
      var $el = $(e.target);
      if ($el.attr('class') === 'pac-container pac-logo') {
        self.cleanAutocomplete($el);
      }
    }, 0);
  }
});

// Remove bound events on document for performance
// and move .pac-container
function cleanAutocomplete($el) {
  $(document).unbind('DOMNodeInserted');
  $el.detach().insertBefore($('.row'));
};

我试图解决同样的问题，这对我有用。我使用的是Backbone，因此$(document).bind(...)包含在使用new google.maps.places.Autocomplete(...)创建自动填充的功能中。

这里要注意的主要事项是，您可能会有多个.row个实例，因此您可能应该为其提供一个唯一的类或ID。

希望有所帮助！

如何将谷歌自动完成整个div移动到另一个div

4 个答案: