Question

我有一个使用XSLT的HTML页面：这是一个使用XSLT foreach循环构建的动态列表。

<div data-role="content" id="contacts" data-c8o-listen=".GetContacts">

  <div data-role="collapsible-set" data-c8o-each="records">
    <div data-role="collapsible">
      <h3>{FirstName}&nbsp;{LastName}</h3>

        <label><b>Company:&nbsp;</b></label><span>{Company}</span><br/>
        <label><b>Phone:&nbsp;</b></label><span>{Phone}</span><br/>
        <label><b>Street:&nbsp;</b></label><span>{Street}</span><br/>
        <label><b>City:&nbsp;</b></label><span>{City}</span><br/>
        <label><b>Country:&nbsp;</b></label><span>{Country}</span>
        <button class="gm">Google map</button>
        <!-- >button data-c8o-call=".ReadContact" >
          Get Details<span style="visibility:hidden"
                        data-c8o-variable="ID">{Id:first}</span>
        </button-->
    </div>
  </div>

我需要以某种方式添加按钮或链接到谷歌地图

var loc = Country + "," + State + ","  + Street;
var addr = "https://maps.googleapis.com/maps/api/staticmap?center=" + loc +
    "&zoom=14&size=288x300&sensor=false";

我怎么能用jQuery做到这一点？由于列表是动态的，我无法分配ID。

Answer 1

听起来好像要使用$('selector').each(fn)来迭代可折叠的div。

您的函数fn(index, element)将使用element参数（或this）计算当前div的国家/地区等。

最后，您可以使用以下内容添加链接：

$(this).append('<a href="' + addr + '">Google maps</a>');

我正在猜测条件和要求，所以如果上述情况不符合你的需要，请告诉我我猜错了哪些方法。

更新

回应评论的一个例子。我一开始就拒绝给出一个例子，因为我必须猜测具体细节。但考虑到这一点......

$('div[data-role="collapsible"]').each(function(index, element) {
   // ... your code to extract Country etc. from this or element arg. ...

   var loc = Country + "," + State + ","  + Street;
   var addr = "https://maps.googleapis.com/maps/api/staticmap?center=" +
      loc + "&zoom=14&size=288x300&sensor=false";
   $(this).append('<a href="' + addr + '">Google maps</a>');
});

动态构建GoogleMaps链接

1 个答案:

更新