jquery帮助需要 - 仅将数据放在同一个div下答案

【问题标题】：jquery help need - put data only under same divjquery帮助需要 - 仅将数据放在同一个div下
【发布时间】：2014-10-01 04:44:23
【问题描述】：

因此，制作一个包含多个地址搜索框的表单。使用 jquery google 自动完成地址搜索。使用这个 jquery 插件： ubilabs.github.io/geocomplete

尝试将详细信息数据获取到不同的输入框，如下所示： ubilabs.github.io/geocomplete/examples/form.html

$(".addressinputclass").geocomplete({
  details: ".thisisparentclass",
  detailsAttribute: "data-geo"
});

这是html：

            <div class="thisisparentclass">
                <input type="text" name="address1" class="addressinputclass" />
                <input type="text" name="writepostcodehere" placeholder="Post code" data-geo="postal_code" />
                <input type="text" name="writecountryhere" placeholder="Country Name" data-geo="country" />
            </div>

但是现在的问题是，当地址输入框超过一个时，其他信息框获取最后一个地址信息。你可以在这里查看示例： http://jsfiddle.net/kosmspLm/

有什么帮助吗？

更新：感谢 Lesha Ogonkov 和 Tushar Gupta 的帮助。我得到了我的问题的解决方案。 :)

【问题讨论】：

标签： javascript jquery google-maps maps

【解决方案1】：

Fiddle Demo

解决方案

$this.closest(".thisisparentclass");

找到地址输入的类thisisparentclass的当前父级，这样detailsAttribute只为当前选择填充。

$(function () {
    $(".addressinputclass").each(function () {//run each loop
        var $this = $(this); //cache your selector, this refers to the current element
        $this.geocomplete({ //attach auto-complete to the current element 
            details: $this.closest(".thisisparentclass"), //get the closest elements with class thisisparentclass
            detailsAttribute: "data-geo" //attach data attribute
        });
    });
});

问题

您将附加到具有thisisparentclass 类的所有元素，因此当您选择地址时，它会填充所有框并更改先前的选择。

$(".addressinputclass").geocomplete({
  details: ".thisisparentclass", //you are attaching to all the elements having this class
  detailsAttribute: "data-geo"
});

【讨论】：

哇！我尝试使用 $(this).closest(".thisisparentclass")，但没有成功，没有考虑每个循环。非常感谢您的代码。
@crazymoin 很高兴它有帮助:)

【解决方案2】：

您可以将选择器传递给插件

http://jsfiddle.net/kosmspLm/2/

$(function(){
  $('.addressinputclass[name="address1"]').geocomplete({
    details: $($(".thisisparentclass").get(0)),
    detailsAttribute: "data-geo"
  });
});

如果你需要很少的字段来工作，我认为你需要循环你的容器，像这样：

$(function(){
  $(".thisisparentclass").each(function() {
      var suggest, details;

      details = $(this);
      suggest = details.find('.addressinputclass');

      suggest.geocomplete({
        details: details,
        detailsAttribute: "data-geo"
      });
  });
});

http://jsfiddle.net/kosmspLm/3/

【讨论】：