清理数据,在<dd>&amp;中包装数字使用jQuery </dt>在</dd> <dt>中包装文本

时间:2012-09-25 23:43:48

标签: jquery match

我能够将长字符串转换为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.用“dd”标签包装“n” 5.用'dt'标签包裹“w” 6.“n”&amp; “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>');

});

1 个答案:

答案 0 :(得分:0)

这就是它,但你的代码中有一些小问题:

  1. 要匹配数字,请使用\d而不是d。与D相同,它应该是\D;
  2. match返回一个数组,因此您需要访问它的第一个位置以获取匹配的值;
  3. $.each已遍历所有dl,无需在循环的每次迭代中再次选择它们。只需使用this
  4. 来引用正在迭代的元素

    以下是固定代码和 DEMO

    $("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);
    });​