名前を緯度と経度のデータで抽出して関連付けることができません

Question

ページに15個のLIアイテムがあります。重度に入れられたHTMLから名前、緯度、経度の単純なJSONオブジェクトにデータを再構築しようとしています。例えば

、1つのレコードは次のようになります。これは

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

：

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

これは、私が働いているHTML内の各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); 

    }); 

残念ながら、コンソールログは以下返し、また抽出することを拒否します経度とそれをオブジェクトに入れます（別の機能として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'); 
} 

または$で行うこともできます。あなたは、セレクタに入れた場合、各ループ

$(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距離」jQueryのセレクタにマッチ各要素のを実行することを意味する場合/ elseステートメント、の別個の枝です。あなたが最初の値が存在するかどうかをテストしなければならない場合は、あなただけの場合は、別のステートメントを使用することができます。

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

ものの、以下の私のコメントで述べたように、子供（）のattr（）が自動的に子供を反復しません。 。 jQuery docs on .attr()から：

マッチした要素のセットの最初の要素の属性の値を取得するか、すべての一致 要素の1つ以上の属性を設定します。

だから、何とかそれらを繰り返す必要があります。あなたは）（.each使用することができます

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

それとも、あなたが解析しているデータの構造を知っている、あなたはいくつかの要素だけではなく、数百人が必要な場合は、if文を取り除くでした（S）およびネストされた各（）と、このような単純なものを使用します。

また、あなたはより適切なものにあなたのオブジェクトのための「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); 
}); 

：

obj["name"] = $(this).find('[itemprop="name"]').html(); 

Answer 3

は、あなたも、条件文を必要としない：

交互

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