2016-10-18 19 views
1

私はjsonがHTMLを返すようにしました。下図は、Ajaxビットである:Javascript - jsonの応答からhtml要素を抽出します。

$.ajax({ 
       type: 'POST', 
       url: area.wrapper.attr('data-ajax'), 
       data: data_submit, 
       dataType: 'json', 
       success: function(data) 
       { 
         console.log(data.content); 
       } 
}); 

にconsole.log(data.content)。以下のようなHTMLを返し:上記のHTML応答から

<div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$63.00/Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div> 


<div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$68.00/Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div> 


<div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$58.00/Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div> 


<div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$50.00/Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div> 

を、私はクラスの下にある価格キャプチャしたい:今すぐ

<span class="gdlr-tail" id = "gdlr-currencyprice">$63.00/Night</span> 

を、次のステップは、値を取得する必要がありますされますクラスから、これは移動するための方法でなければなりません:。

$( "gdlrテール")、各(関数(I){}

私の質問に、どのように私のAjax応答から:data.content、私は私の値にアクセスする私の反復関数に渡すために私のクラス属性(gdlr-tail)をキャプチャする必要がありますか?私の質問は、jQueryを使って

+0

を試してみてくださいあなたは実際に必要なMLですか? JSONを使ってHTMLをラップするのはかなり冗長です。また、同じ 'id'を繰り返したときに生成するHTMLは無効です。それらは一意である必要があります –

+0

htmlは、同じIDを反復するバックエンドスクリプトから生成されます。私が必要とするだけのHTMLを返す方法に関するアドバイスにも興味があります。ありがとう – suo

+0

同じIDを2回使用せずに反復することができます。各要素に同じセレクターが必要な場合は、クラスを使用します。このためにIDを使用すると、IDを持つ目的が完全に無効になります。 – Tom

答えて

0

使用正規表現値を抽出します。 :

var html = '<div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$63.00/Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div><div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$68.00/Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div><div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$58.00/Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div><div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$50.00/Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div>'; 
 

 
var result = html.match(/\$[\d\.]+ \/ [^<]+/gi); 
 

 
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

+0

優れています。すべての答えは技術的には正しいですが、これはポイントを打つ – suo

3

明らかであると思います、あなただけ行うことができます:$(data.content).find( 'gdlrテールを。')それぞれの(...)

2

理由だけではなく、HT *のみ*戻らないこの

$(data.content) 
    .find('.gdlr-tail') 
     .each(function(i,el){ 
      alert(el); 
     }); 
関連する問題