如何遍历xml元素在javascript中的直接子元素，保存特定属性的值

How to iterate over an xml element's direct children in javascript, saving values of specific attributes?

本文关键字：元素 保存 属性 何遍历 遍历 javascript xml      更新时间：2023-09-26

我对javascript比较陌生，并且已经发现了ajax，我已经能够使用它从URL检索xml文件并找到具有特定属性值的元素，但是我无法弄清楚如何遍历元素的子元素，获取特定的属性值。我正在使用的xml文件可以在这里找到，或者可以在中找到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>

我可以用'name="glasgow"'获取特定的城市，以及它的所有子城市

<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>

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

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

使用children().each() 

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

你必须查看对象，获取它的属性等等…但这是你能够深入了解它的方法。

这是view的jsfiddle:

http://jsfiddle.net/ubj6nkgr/

或者，您可以在xml选择器上下文中选择"place"元素:

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

两个例子都在jsfiddle中。

至于对象，我不得不考虑这个:根据这个找到最近的经度和纬度在数组?您需要首先计算距离，并将其放入数据结构中，因此您可以每次都循环遍历位置(遍历DOM)，我怀疑这不是最有效的方法，或者您可以有一个键值列表，键值是计算的距离和每个位置特定的键值。

选择第一个键，你有最近的位置。
相关文章：