如何在javascript中迭代xml元素的直接子节点,保存特定属性的值?

时间:2015-10-19 21:23:15

标签: javascript jquery ajax xml xml-attribute

我对javascipt相对较新,并且发现了ajax,我可以用它从URL检索xml文件并找到具有特定属性值的元素,但是我无法弄清楚如何迭代元素的子元素,获取特定的属性值。我正在使用的xml文件可以找到here可以找到xml文件的片段,请参阅下文:



<markers>
  <country lat="53.6707" lng="-4.39453" zoom="5" name="nextbike UK" hotline="+442081669851" domain="uk" country="GB" country_name="United Kingdom" terms="http://www.nextbike.co.uk/media/TERMS-UK_3.pdf" website="http://www.nextbike.co.uk/">
    <city uid="237" lat="55.8589" lng="-4.25549" zoom="12" maps_icon="" alias="glasgow" break="0" name="Glasgow">
      ...
      <place uid="264281" lat="55.86078768935794" lng="-4.258602261543274" name="Central Station " spot="1" number="8401" bikes="5+" bike_racks="10" terminal_type="unknown" bike_numbers="81610,81508,81805,81756,81835" />
      <place uid="264283" lat="55.860767" lng="-4.264083" name="Waterloo Street" spot="1" number="8402" bikes="5+" bike_racks="6" terminal_type="unknown" bike_numbers="81771,81571,81647,81588,81934" />
      ...
    </city>
  </country>
</markers>
&#13;
&#13;
&#13;

我可以使用&#39; name =&#34; glasgow&#34;&#39;及其所有孩子来获取特定城市

&#13;
&#13;
<city uid="237" lat="55.8589" lng="-4.25549" zoom="12" maps_icon="" alias="glasgow" break="0" name="Glasgow">
  <place uid="264281" lat="55.86078768935794" lng="-4.258602261543274" name="Central Station " spot="1" number="8401" bikes="5+" bike_racks="10" terminal_type="unknown" bike_numbers="81610,81508,81805,81756,81835" />
  <place uid="264283" lat="55.860767" lng="-4.264083" name="Waterloo Street" spot="1" number="8402" bikes="5+" bike_racks="6" terminal_type="unknown" bike_numbers="81771,81571,81647,81588,81934" />
  ...
</city>
&#13;
&#13;
&#13;

很容易,使用$(xml).find("[name='Glasgow']");,但我对如何处理返回的对象感到很遗憾。 我需要遍历每个孩子(<place/>)并选择特定属性,例如lat="..."lng="..."

取决于动态获取此信息的容易程度可能会影响我是否需要将信息存储在其他对象中。我将使用用户的地理位置并找到最接近的纬度和经度点集。以粗体显示的上述问题是最重要的,但如果有人想建议他们认为最适合存储这些信息的结构,以及快速检索信息的最佳方法,那么您非常欢迎这样做

1 个答案:

答案 0 :(得分:1)

使用children().each()

$(xml).find("[name='Glasgow']").children.each(function() {
    console.log($(this));
    console.log($(this).attr('lat'))
});

您必须查看对象获取它的属性等...但这是您可以钻进它的方式。

这是一个jsfiddle for view:

http://jsfiddle.net/ubj6nkgr/

或者,您可以在xml选择器上下文中选择“place”元素:

var $xml = $(xml).find("[name='Glasgow']");
var $places = $('place', $xml)
$places.each(function() { console.log($(this)); });

这两个例子都在jsfiddle中。

就对象而言,我不得不考虑这个问题:根据这个Find closest longitude and latitude in array?,您需要计算距离FIRST并在数据结构中具有该距离,因此您可以每次循环遍历场所(遍历) DOM),我怀疑它不是最有效的,或者你可以有一个键值列表,键是计算的距离和每个地方特定的键的值。通过最短的方式对键进行排序选择第一个键,并且您拥有最近的位置。