2

以下に示すように、長い文字列を dl リストに変換できました。

 <div class="classA">
   <dl id="idA"> Display # 252215425:  </dl>
   <dl id="idB">3 Apples   </dl>
   <dl id="idC">3 Peaches   </dl>
   <dl id="idD">10 Seadless Watermelons   </dl>
   <dl id="idE">23 Bananas </dl>
 </div>

私が望む結果は次のとおりです。

 <div class="classA">
   <dl id="idA"> 
       <dd>252215425</dd>
       <dt>Display #</dt>
   </dl>

   <dl id="idB"> 
       <dd>3</dd>
       <dt>Apples</dt>
   </dl>

   <dl id="idC"> 
       <dd>3</dd>
       <dt>Peaches</dt>
   </dl>

   <dl id="idD"> 
       <dd>10</dd>
       <dt>Seadless Watermelons</dt>
   </dl>

   <dl id="idE"> 
       <dd>23</dd>
       <dt>Bananas</dt>
   </dl>
 </div>

私が達成しようとしている目標: 1. 各 dl コンテンツを配列に分割する 2. 数字を見つけて "n" に保存する 3. テキストを見つけて "w" に保存する 4. "n" を 'dd' タグでラップする5. 「w」を「dt」タグで囲みます 6. 「n」と「w」の前後に空白を入れないでください

これが私が思いついたコードですが、うまくいきませんでした...

$("div.classA dl").each(function(){
      var a = $("div.classA dl").html();
      a = a.split(' ');
      var n = a.match(/d+/);
      var w = a.match(/D+/);
      $("div.classA dl").text('');
      $("div.classA dl").append('<dd>'n'</dd>');
      $("div.classA dl").append('<dt>'w'</dt>');

});
4

1 に答える 1

0

これでほぼ完了ですが、コードにいくつかの小さな問題があります。

  1. 数字を一致させる\dには、 just の代わりに を使用しdます。Dあるべきところに同じことが言えます\D。
  2. match配列を返すため、一致する値を取得するには配列の最初の位置にアクセスする必要があります。
  3. $.eachはすでにすべてdlの を反復処理しているため、ループの反復ごとにすべてを再度選択する必要はありません。を使用して、反復されている要素を参照するだけthisです。

固定コードとデモは次のとおりです。

$("div.classA dl").each(function() {
  var $this = $(this);
  var text = $this.text();        
  var n = text.match(/\d+/)[0];
  var w = text.match(/\D+/)[0].replace(/^\s*|\s*$/g, '');

  $this.empty();

  $("<dd>").text(n).appendTo($this);
  $("<dt>").text(w).appendTo($this);
});​
于 2012-09-26T00:07:31.577 に答える