无法提取并将名称与纬度和经度数据相关联

时间：2016-04-05 12:13:59

标签： jquery html json

我在页面上有15个LI项目，我正在尝试将重度嵌套的html中的数据重建为名称，纬度和经度的简单JSON对象。

例如，一条记录可能如下：

{name: "Pied a Terre", lat: "51.5191", "lng: "-0.1399435"}

这是HTML I中使用的每个LI的略微简化版本：

<li class="has-distance link-block" itemtype="http://schema.org/Restaurant">

    <meta content="Yes" itemprop="acceptsReservations">

    <div class="item" data-id="109054" data-weight="-42.4101">

        <img class="photo loaded" src="http://img.static-bookatable.com/heeltap-london-bridge-london-1.jpg?id=218ab1c679b5a543c0a6b53012c379d5.jpg=" width="140" height="100" alt="Heeltap - London">        

    <div class="detail">

        <span itemprop="reviews" itemscope="" itemtype="http://schema.org/AggregateRating">
            <meta content="0" itemprop="ratingValue">
            <meta content="0" itemprop="reviewCount">
            <span class="star rating" title="Not yet rated">
                <span class="average"><span>*****</span></span>
            </span>
        </span>

        <h3 class="fn" itemprop="name">Heeltap</h3>
        <p class="adr wide" itemprop="address">Chaucer House, White Hart Yard, London, SE1 1NX</p>
        <p class="cuisine" itemprop="servesCuisine">British </p>
        <span itemprop="geo" itemscope="" itemtype="http://schema.org/GeoCoordinates">
            <meta content="51.50418" itemprop="latitude">
            <meta content="-0.08918" itemprop="longitude">
        </span>

    </div> <!-- detail end tag -->

</div> <!-- item end tag -->

<a class="block-link" data-analytics="Restaurant List|Restaurant Click|offpage" href="heeltap-london-bridge-london" itemprop="url" title="Heeltap (Not yet rated)">Heeltap</a>

</li>

这是我尝试的最新代码（出于许多不同的尝试）：

（我重构了以前在变量中存储长jQuery选择器，并使用$（this），但我认为这可能会影响代码，所以我在下面以一种简单但冗长的方式做到了这一点）：

$('.has-distance').each(function(){

    var obj = {};

    obj["name"] = $(this).find('.block-link').html();

    // console.log(nameObject);

    // $('.has-distance').find('span[itemprop="geo"]').children().each(function(){

        if ( $(this).find('span[itemprop="geo"]').children().attr('itemprop') === "latitude" ) {
         obj["lat"] = $(this).find('span[itemprop="geo"]').children().attr('content');
       }
        else if ( $(this).find('span[itemprop="geo"]').children().attr('itemprop') === "longitude" ) {
        obj["lng"] = $(this).find('span[itemprop="geo"]').children().attr('content');
      }

      console.log(obj);

  });

不幸的是，控制台日志只返回下面的内容，并拒绝提取经度并将其放在对象中（即使我作为单独的.each函数执行if / else，如果逻辑有效）。

Object {name: "Momo", lat: "51.5112371"}
Object {name: "Pied a Terre", lat: "51.5191"}
Object {name: "Crazy Bear - Fitzrovia", lat: "51.5196971"}
Object {name: "Les Deux Salons", lat: "51.5094799"}
Object {name: "The National Café", lat: "51.508929"}
Object {name: "Athenaeum", lat: "51.50464"}
Object {name: "inamo", lat: "51.5149166"}
Object {name: "The Grill at The Dorchester", lat: "51.50729"}
Object {name: "Planet Hollywood London", lat: "51.5092777"}
Object {name: "The Ritz Restaurant - London", lat: "51.50718"}
Object {name: "Homage Restaurant at The Waldorf Hilton", lat: "51.5121546"}
Object {name: "DSTRKT Restaurant and Bar", lat: "51.5110772"}
Object {name: "Marconi Lounge at ME London", lat: "51.51163"}
Object {name: "Kaspar's Seafood Bar and Grill", lat: "51.510012"}
Object {name: "Hakkasan - Hanway Place", lat: "51.5169686"}

请帮助，我真的被困在这里！非常感谢提前！

3 个答案:

答案 0 :(得分：1)

试试这个。

if ($(this).find('span[itemprop="geo"] meta[itemprop="latitude"]').length > 0) {
    obj["lat"] = $(this).find('span[itemprop="geo"] meta[itemprop="latitude"]').attr('content');
}
if ( $(this).find('span[itemprop="geo"] meta[itemprop="longitude"]').length > 0) {
    obj["lng"] = $(this).find('span[itemprop="geo"] meta[itemprop="longitude"]').attr('content');
}

或者你可以用$ .each循环

来做 
  $(this).find('span[itemprop="geo"]').children().each(function() {
    if ($(this).attr('itemprop') === "latitude" ) {
        obj["lat"] = $(this).attr('content');
    } else if ( $(this).attr('itemprop') === "longitude" ) {
        obj["lng"] = $(this).attr('content');
    }
});

答案 1 :(得分：1)

如果你把它们放在选择器中，你甚至不需要条件：

$('.has-distance').each(function() {
  var obj = {};
  obj.name = $(this).find('.block-link').html();
  obj.lat = $(this).find('span[itemprop="geo"]').children('meta[itemprop="latitude"]').attr('content');
  obj.lng = $(this).find('span[itemprop="geo"]').children('meta[itemprop="longitude"]').attr('content');
  console.log(obj);
});

交替：

$('.has-distance').each(function() {
  var obj = {};
  obj.name = $(this).find('.block-link').html();
  var geo = $(this).find('span[itemprop="geo"]');
  obj.lat = geo.children('meta[itemprop="latitude"]').attr('content');
  obj.lng = geo.children('meta[itemprop="longitude"]').attr('content');
  console.log(obj);
});

答案 2 :(得分：0)

提取纬度和经度的代码部分是if / else语句的单独分支，这意味着只有其中一个将运行，用于与'.has-distance'匹配的每个元素jQuery选择器。如果必须首先测试值是否存在，则可以使用单独的if语句：

this.rsInstance().ev.on('rsAfterSlideChange', function() {
    this.currSlide.content.find('.rsABlock').textillate({
        loop: false,
        initialDelay: 0,
    });
});

尽管如下面的评论中所述，children（）。attr（）不会自动遍历子项。来自jQuery docs on .attr()：

  

获取集合中第一个元素的属性值   匹配的元素或为每个匹配的元素设置一个或多个属性   元件。

所以你必须以某种方式迭代它们。你可以使用.each（）：

$('.has-distance').each(function(){
    var obj = {};
    obj["name"] = $(this).find('.block-link').html();

    if ( $(this).find('span[itemprop="geo"]').children().attr('itemprop') === "latitude" ) {
        obj["lat"] = $(this).find('span[itemprop="geo"]').children().attr('content');
    }
    if ( $(this).find('span[itemprop="geo"]').children().attr('itemprop') === "longitude" ) {
        obj["lng"] = $(this).find('span[itemprop="geo"]').children().attr('content');
    }
    console.log(obj);
  });

或者，如果你知道你要解析的数据的结构，并且你只需要几个元素而不是数百个元素，你就可以去掉if语句和嵌套的每个元素。 （）并使用更简单的东西：

$('.has-distance').each(function(){
    var obj = {};
    obj["name"] = $(this).find('.block-link').html();

    $(this).find('span[itemprop="geo"]').children().each(function() {
        if( $(this).attr('itemprop') === "latitude" ) {
            obj["lat"] = $(this).attr('content');
        }
        else if ( $(this).attr('itemprop') === "longitude" ) {
            obj["lng"] = $(this).attr('content');
        }
    });

    console.log(obj);
});

您可能还会考虑更改将对象的“name”属性收集到更合适的方式：

$('.has-distance').each(function(){
  var obj = {};

  obj["name"] = $(this).find('.block-link').html();
  obj["lat"] = $(this).find('span[itemprop="geo"] > meta[itemprop="latitude"]').attr('content');
  obj["lng"] = $(this).find('span[itemprop="geo"] > meta[itemprop="longitude"]').attr('content');

  console.log(obj);
});
相关问题
最新问题