6

XMLテキストとして表示する必要があるものがありdivます。これを以下のような形式
に変換できますか。XML

<root>
<field>
  <label>Have you invested before</label>
  <value>No</value>
</field>
<field>
  <label>Are you looking to invest in the next 6 months</label>
  <value>Maybe</value>
</field>
<field>
  <label>What investments are you interested in</label>
  <value>Carbon Credits, Green Investments</value>
</field>
<field>
  <label>How much are you looking to invest</label>
  <value>£50,000 -  £100,000</value>
</field>
</root>

出力は次のようになります。

以前に投資したことがありますか : いいえ
今後 6 か月以内に投資を検討していますか : 多分
どのような投資に関心がありますか : 炭素クレジット、グリーン投資
いくら投資を検討していますか : 5 万ポンドから 10 万ポンド

これは Jquery/javascript を使用して可能ですか??

そして、以下の HTML のようにレンダリングする必要があります。

<div class="how-to">
<div class="how-text">
    <h3>Your Requirements</h3>
        <ul class="requirements">         
<li><label class="field-l">Have you invested before:</label> <span>No</span></li>         
<li><label class="field-l">Are you looking to Invest in the next 6 months:
</label>      <span>Maybe</span></li>         
<li><label class="field-l">What Investments are you interested in:</label> 
<span>Carbon  Credits,Green Investments</span></li>
 <li><label class="field-l">How much are you looking to invest:</label>
  <span>£50,000 -  £100,000</span></li>
      <li class="link-pad"><a href="index.html" class="requirements">
     Change  your requirements</a></li>
    </ul>
<div class="clear"></div>
 </div>
  </div>
4

1 に答える 1

28

ステップ 1: xml を検証する

xml が無効です。たとえば、オンラインバリデータで有効かどうかを確認できます。それらはたくさんありますが、私がリンクしたものはほんの一例です。

この回答では、次のようなxmlがあると仮定します

<root>
  <field>
      <label>Have you invested before</label>
      <value>No</value>
  </field>
  <field>
      <label>Are you looking to invest in the next 6 months</label>
      <value>Maybe</value>
  </field>
  <field>
      <label>What investments are you interested in</label>
      <value>Carbon Credits, Green Investments</value>
  </field>
  <field>
      <label>How much are you looking to invest</label>
      <value>£50,000 -  £100,000</value>
  </field>
</root>

ステップ 2: おそらく ajax を介して xml を取得します

これは明らかだと思いますが、とにかくここに含めます。

$.get('/url_of_the_xml_resource')
  .done(function(data){
    // this function is executed if the request was sucessfull
  })
  .fail(function(){
    // this function is executed if the request fails
  })
;

ステップ 3: xml を解析する

jQuery の$.parseXMLを使用して解析し、生データを XML ドキュメントに変換できます。

$.get('/url_of_the_xml_resource')
  .done(function(data){
    // parse the xml
    data = $.parseXML(data);
    //
    // do anything you want with the parsed data
  })
  .fail(function(){
    alert('something went wrong!');
  })
;

ステップ 4: データで遊ぶ

これで、操作する xml ドキュメントができました。次のスニップネットは、HTML レイアウトに定義リスト、<dl>タグがあることを前提としており、前の手順と同様に、データが解析された後に実行されると想定されています。

// first we query the HTML document to get the list element
// and store it for later use
var list = $('dl');
// data is a xml document now, so we query it...
$(data)
  // and search for all <field> elements
  .find('field')
  // now we can play with each <field>
  .each(function(index, element){
    // as example we query & store the field
    var field = $(element)
    // get the values we want
    var label = field.find('label').text()
    var value = field.find('value').text()
    // and append some html in the <dl> element we stored previously
    list
      .append('<dt>'+label+': </dt>')
      .append('<dd>'+value+'</dd>')
    ;
  })
;

結論

jQueryはあなたが使いたいものです。連鎖可能な性質により、バターを切るように DOM を横切ることができます。この回答がお役に立てば幸いです。

追加の参照として、jsfiddle の完全な例を参照してください。

于 2013-04-19T20:45:26.227 に答える