Question

我在页面上有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"}

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

Answer 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');
    }
});

Answer 2

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

$('.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);
});

Answer 3

提取纬度和经度的代码部分是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);
});

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

3 个答案: