Javascript - jsonの応答からhtml要素を抽出します。

Question

私はjsonがHTMLを返すようにしました。下図は、Ajaxビットである：

$.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を使って

Answer 1

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

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>

Answer 2

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

Answer 3

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

$(data.content) 
    .find('.gdlr-tail') 
     .each(function(i,el){ 
      alert(el); 
     });